需要帮助多次调用一个JQuery函数，而不必为每个选择器提供一个函数

Question

好吧，基本上我创建了一个在站点上多次使用的前十名单。不过，我希望列表中的内容在点击数字时被隐藏并一一揭示。但是，单击第一个数字会导致整个列表展开。这里是JQuery的：

$(document).ready(function(){ 
     $("#articletext h2").click(function(){ 
      $(".revealTitle").fadeIn(); 
      $(".revealText").slideDown(); 
    }); 
}); 

下面是HTML：

<h2>10. <span class="revealTitle">The Title To Fade In On Click</span></h2> 

<span class="revealText">The Text to Slide Down On Click</span> 

所以，我希望它做的是：

• 当点击数（即10）只有这些数字揭示了标题和揭示文字出现。
• 同样当点击下一个数字（即9）9.显示标题和显示文字出现。

在此先感谢。

Answer 1

使用上下文选择

这将确保只有要素与.revealText和.revealTitle中搜索在当前上下文中（这里是被点击的h2元素）

$(".revealTitle", this).fadeIn(); 
$(this).nextAll(".revealText").first().slideDown(); 

Answer 2

使用$(this)选择和find方法来定位正确孩子：

$(document).ready(function(){ 
    $("#articletext h2").click(function(){ 
      $(this).find(".revealTitle").fadeIn(); 
      $(this).find(".revealText").slideDown(); 
    }); 
});