Question

我有一个团队成员网格，都是用figcaptions建的数字。我想触发当前点击的点击功能，它将点击功能应用到所有数字。

HTML ex：）

<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旁边的元素，即被点击的元素。

Answer 2

尝试使用next()：

$('.team-items p').fadeOut(10);
$('.team-member-name').click(function(){
    $(this).next('p').toggle(700);
});

Fiddle.

Answer 3

使用this作为上下文，仅定位所点击项目中的 p 。

然后使用next选择器显示相应点击元素的figCaption

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

$('.team-member-name').click(function(){
   $(this).next('.figcaption').toggle(700);
});

Answer 4

我只是使用figcaption元素。这也将取消绑定点击。

$('figcaption p').fadeOut(10);

$(document).off('click','figcaption').on('click', 'figcaption', function() {
   $(this).find('p').toggle(700);
}):

仅在特定元素上触发单击功能

4 个答案: