使用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()

Answer 2

可以使用.next()

Answer 3

您也可以在父<div>元素与fieldleft类使用closest()匹配，然后继续使用prevAll()其formhead兄弟姐妹：

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