使用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"); 
    }); 
});