Question

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

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

要执行此操作，您可以使用this关键字，该关键字将引用引发click事件的元素。试试这个：

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

Answer 2

在此上下文中使用.prev()。

$(".show-more").click(function(e) {
   e.preventDefault();
   $(this).prev().toggleClass("hidden");
});

Fiddle

Answer 3

.extra-text是.show-more的兄弟，因此您可以使用 siblings() 方法获取相邻的兄弟元素

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

jQuery事件只影响该元素的这个实例

3 个答案: