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

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

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的相邻段落上触发事件。可能与此有关？

谢谢

最佳答案

您可以使用siblings：

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

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

关于javascript - 仅在特定元素上触发点击功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25148939/