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()的原因是中间还有其他链接。