Блог

У меня есть форма, которая разделена на части, разделенные разделителями, например:

 <form>
<div>
   Account Details
</div>
<div>
Personal Details
</div>
<div>
...etctec
</div>

</form>
  

Я хочу, чтобы, когда кто-то выделяет или фокусируется на каком-либо элементе в divs, соответствующий div выделялся с помощью css. Учтите тот факт, что я применил ряд обработчиков к определенным элементам ввода в этой форме.

Вы могли бы попробовать:

 $('input').focus(
    function(){
        // adds the 'highlight' class to the parent
        $(this).closest('div').addClass('highlight');
    });
  

С помощью:

 $('input').blur(
    function(){
        // removes the 'highlight' class from the parent so only one highlight is ever visible.
        $(this).closest('div').removeClass('highlight');
    });
  

И определить highlight класс в CSS:

 .highlight {
    background-color: #ffa;
}
  

Демонстрационная версия JS Fiddle, пожалуйста, обратите внимание, что в демо-версии я использую fieldset s вместо div для обертывания различных элементов label и input , но в остальном это точно такой же принцип.

Обновлена демонстрационная версия для большей привлекательности: переработан JS Fiddle.

Отредактировано в ответ на вопрос из OP:

Это здорово — однако с этим кодом есть небольшая проблема, то есть, если когда-либо входные данные в div теряют фокус, div отображается как неосвещенный. Есть ли способ, чтобы div оставался в фокусе до тех пор, пока не будет сфокусирован элемент ввода в другом div, на который затем будет выделен родительский элемент сфокусированного div

Да, предполагая, что я вас правильно понял, это довольно просто:

 $('input').focus(
    function() {
        $(this)
            .closest('form')
            .find('.highlight')
            .removeClass('highlight');
        $(this).closest('fieldset').addClass('highlight');
    });
  

Демонстрационная версия JS Fiddle.

 $('form > div').delegate('input', 'focus', function() {
    $(this).closest('div').addClass('active');
}).delegate('input', 'blur', function() {
    $(this).closest('div').removeClass('active');    
});
  

Демонстрация: http://jsfiddle.net/ThiefMaster/fG8Au /

Если вы хотите быть уверены, что выделен только div прямо внутри тега формы, используйте $(this).closest('form > div') .

Создайте класс highlight в вашем CSS и попробуйте следующий jQuery:

 $('input, select, textarea').focus (function ()
{
    var elem = $(this), container = elem.parents ('div');

    container.siblings ().removeClass ('highlight');
    container.addClass ('highlight');
})
  

Попробуйте это:

 .highlight{background:#ddd}


$('input').focus(function(){
    $(this).parent().parent().find('div.highlight').removeClass('highlight');
    $(this).parent().addClass('highlight');
});