javascript - jQuery 事件仅影响元素的此实例

Question

我有多个具有相同类名的元素，理想情况下它们将是七个，因此，在页面加载时它们将被隐藏，然后我想在单击 anchor 时显示额外的文本，但仅限于该实例div 的，我的 jQuery 代码当前正在删除 div 的所有实例中的隐藏内容，我猜测解决方案是在某处添加 this 。谢谢!

$(".show-more").click(function() {
  return $(".extra-text").toggleClass("hidden");
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <p>Text</p>
  <p class="hidden extra-text">More text</p>
  <a href="#" class="show-more">Show more..</a>
</div>
<div>
  <p>Text</p>
  <p class="hidden extra-text">More text</p>
  <a href="#" class="show-more">Show more..</a>
</div>

Answer 1

您需要遍历 DOM 以查找与引发事件的元素相关的 .extra-text 元素。

为此，您可以使用 this 关键字，它将引用引发点击事件的元素。试试这个:

$(".show-more").click(function() {
    $(this).closest('div').find(".extra-text").toggleClass("hidden");
});