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

В следующем коде я пытаюсь сделать так, чтобы при выборе ввода (сфокусированном) formhead div в связанном наборе полей менял цвет фона, а при размытии он менялся обратно. Я хотел бы сделать это, добавив класс в тот же 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>

jquery onblur onfocus jquery-events dom-traversal
person hisnameisjimmy    schedule 30.05.2011    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Вы можете получить ввод .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

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

person kapa    schedule 30.05.2011
comment
Спасибо, как раз то, что я ищу. - person bard; 17.11.2015

arrow_upward
1
arrow_downward

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

$(document).ready(function() {
    $("input:text").bind("focus blur", function() {
        $(this).closest(".fieldleft").prevAll(".formhead").toggleClass("bluebg");
    });
});
person Frédéric Hamidi    schedule 30.05.2011
comment
Кажется, это работает только в поле ввода сразу после div формы. Любые входные данные ниже, которые не могут быть нацелены на него, вероятно, из-за ограничений предыдущей - person hisnameisjimmy; 30.05.2011
comment
@hisnameisjimmy, вы абсолютно правы, здесь нужно использовать prevAll(). Ответ обновлен соответственно, спасибо за предупреждение :) - person Frédéric Hamidi; 30.05.2011

arrow_upward
-1
arrow_downward

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

person Vivek    schedule 30.05.2011
comment
Чем здесь может помочь .next()? - person kapa; 30.05.2011