javascript - 仅在特定元素上触发点击功能

Question

我有一个团队成员网格，这些成员都是用带有图形标题的图形构建的。我只想为当前已被单击的那个触发单击功能，它将单击功能应用于所有数字。

HTML 例如:)

<section class="l-team-grid clearfix">
<h2>OUR TEAM</h2>
<figure class="team-items">
<img src="../images/employee-one.jpg" alt="">
<hr>
<figcaption>
    <h3 class="team-member-name">John Doe</h3>
    <p>John is a college graduate he loves milk cookies and broccoli. He is 25 years old and loves architecture.</p>
</figcaption>
<hr>
</figure>
<figure class="team-items">
<img src="../images/employee-one.jpg" alt="">
<hr>
<figcaption>
    <h3 class="team-member-name">John Doe</h3>
    <p>John is a college graduate he loves milk cookies and broccoli. He is 25 years old and loves architecture.</p>
</figcaption>
<hr>
</figure>
<figure class="team-items">
<img src="../images/employee-one.jpg" alt="">
<hr>
<figcaption>
    <h3 class="team-member-name">John Doe</h3>
    <p>John is a college graduate he loves milk cookies and broccoli. He is 25 years old and loves architecture.</p>
</figcaption>
<hr>
</figure>

我当前的 Jquery 用于点击功能

 $('.team-items p').fadeOut(10);


 $('.team-member-name').click(function(){

 $('.team-member-name + p').toggle(700);

 });

我知道为什么选择器是错误的并触发所有 p 的显示，但只是无法弄清楚选择器仅在单击的 h3 的相邻段落上触发事件。可能与此有关？

谢谢

Answer 1

您可以使用siblings :

$('.team-member-name').click(function(){
  $(this).siblings("p").toggle(700);
});

siblings 将返回 this 旁边的元素，即被单击的元素。