Добавьте класс, чтобы сгруппировать определенный div на фокусе с jQuery

Question

В следующем коде я пытаюсь сделать так, чтобы при выделении (фокусировке) входного элемента div "formhead" в связанном наборе полей изменял свой цвет фона, а при размытии - обратно. Я хотел бы сделать это, добавив класс к тому же div по фокусу, и удалив этот класс на размытие. jQuery ближайший является наиболее похожим по концепции на то, что я пытаюсь сделать, но не подходит, потому что он будет нацелен только на родительский div. Есть ли что-то еще, что предназначалось бы для ближайшего div с этим классом, не затрагивая другие классы в других наборах полей? Или я должен быть более конкретным и идентифицировать формы и т. Д.?

<fieldset>
<div class="formhead">Heading Title 1</div>
<div class="fieldleft">
    <label for="specificinput">Input Title</label>
    <input type="text" class="forminput" id="specificinput">
</div>
<div class="fieldleft">
    <label for="specificinput">Input Title</label>
    <input type="text" class="forminput" id="specificinput">
</div>
</div>
</fieldset>

<fieldset>
<div class="formhead">Heading Title 2</div>
<div class="fieldleft">
    <label for="specificinput">Input Title</label>
    <input type="text" class="forminput" id="specificinput">
</div>
<div class="fieldleft">
    <label for="specificinput">Input Title</label>
    <input type="text" class="forminput" id="specificinput">
</div>
</div>
</fieldset>

И JQuery:

<script type="text/javascript"> 
$(document).ready(function() {
    $('input').focus(function( ){
    $(this).closest('.formhead').addClass('bluebg');
  });
    $('input').focus(function( ){
    $(this).closest('.formhead').removeClass('bluebg');
  });
});
</script> 

Answer 1

Вы можете получить вход .formhead с этой строкой:

$(this).closest('fieldset').find('.formhead').addClass('bluebg');

Вы также можете написать это как (фактически то же самое, используя контекст):

$('.formhead', $(this).closest('fieldset')).addClass('bluebg');

Самый простой способ, который я вижу для вашего кода, будет выглядеть примерно так:

$('input.forminput').bind('focus blur', function () {
    $(this).closest('fieldset').find('.formhead').toggleClass('bluebg');
});

jsFiddle Demo

Это назначит тот же обработчик для onfocus а также onblur который просто переключит класс .formhead,

• Несколько событий с .bind()
• .toggleClass()

Answer 2

Вы также можете соответствовать родителю <div> элемент с классом fieldleft используя closest (), затем перейдите к formhead брат с помощью prevAll ():

$(document).ready(function() {
    $("input:text").bind("focus blur", function() {
        $(this).closest(".fieldleft").prevAll(".formhead").toggleClass("bluebg");
    });
});

Answer 3

Вы можете использовать .next()