jQuery的切換獨立

Question

我的HTML是這樣的：

<a class="tableheadlink" href="#">Impressions</a> <a href="#"><img src="images/table-sort.png" alt="" /></a> 
<div class="filter-head"> 
    <form> 
     <select name="website" class="rounded-all no-padding"> 
      <option value="opt1">&gt;</option> 
      <option value="opt2">&lt;</option> 
      <option value="opt3">=</option> 
     </select> 
     <input name="q" type="text" class="rounded-all small"> 
    </form> 
</div> 

jQuery的是這樣的：

 $(".filter-head").hide(); 
     $("a.tableheadlink").click(function(){ 
      $(".filter-head").toggle(); 
      return false; 
     }); 

我如何告訴它切換單獨的HTML部分的每一個瞬間？頁面上大約有10個實例，切換隻會使用我的代碼切換全部。

感謝

Answer 1

你需要找到你想要relative到this的.filter-head，例如：

$(".filter-head").hide(); 
$("a.tableheadlink").click(function(){ 
    $(this).nextAll(".filter-head:first").toggle(); 
    return false; 
}); 

這樣做是從this去然後使用.nextAll()與類選擇並得到:first一個它遇到切換。 .nextAll()而不是.next()的原因是中間還有其他鏈接。