jquery - 使用 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 Demo

这将为 onfocus 和 onblur 分配相同的处理程序，这只会切换 .formhead 的类。

• Multiple events with .bind()
• .toggleClass()