jquery - 需要帮助多次调用 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.）时，只有数字revealTitle 和revealText 出现。
• 同样，当单击下一个数字时（即 9。） 9. 的revealTitle 和revealText 出现。

提前致谢。

Answer 1

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

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

Answer 2

使用上下文选择器

这将确保在当前上下文中仅搜索具有.revealText和的元素.revealTitle（这里是单击的 h2 元素）

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