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

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

3 голосов
/ 30 мая 2011

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

Ответы [ 3 ]

5 голосов
/ 30 мая 2011

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

1 голос
/ 30 мая 2011

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

$(document).ready(function() {
    $("input:text").bind("focus blur", function() {
        $(this).closest(".fieldleft").prevAll(".formhead").toggleClass("bluebg");
    });
});
0 голосов
/ 30 мая 2011

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

...