使用jQuery将类添加到焦点组特定div

Question

在下面的代码中,我试图使它在选择(聚焦)输入时,相关字段集中的"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> 

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演示

这将分配相同的处理程序onfocus和onblur,这将只需拨动类的.formhead.

• 多个事件 .bind()
• .toggleClass()