Wordpress中的Jquery切换

我正在Wordpress的一个团队成员页面上工作。 添加新成员时，应自动填写此团队成员页面。 我使用了插件CPT UI，效果非常好

内容是隐藏的，因此在团队页面上只能看到图像。 很好

但是现在我想在单击图像时切换隐藏内容

到目前为止，我所拥有的对于第一个图像非常有用，但是当点击第二个图像时，第一个“图像”的内容会切换

所以我想我需要某种循环来完成这个

我是Jquery/javascript的完全初学者，所以我希望有人能帮助我

 get_header(); ?>


<div id="page-content-wrapper">
     <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <a href="#menu-toggle" class="btn btn-default" id="menu-toggle"><span class="glyphicon glyphicon-menu-hamburger"> </span></a>

    <section id="team-images">                      



<?php $loop = new WP_Query( array ('post_type' => 'team' , 'orderby' => 'post_id' , 'order' => 'ASC') ); ?>

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?> 


<div id="test-bob"> 

<?php 
    if ( has_post_thumbnail() ) {
        the_post_thumbnail( array( 200 , 200 ) );
}
?>

<section id="team-data"> 
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12"> 
<?php the_title(); ?> 
<?php the_content(); ?>



</div>
</div>

</div> 


</section>

</div>

<?php endwhile; ?>   


 <script>
    $("#test-bob").click(function() {

    $("#team-data").toggle("slow" , function() {

        // animation complete.
    });

});



</script>  
    </section>

<?php get_footer(); ?>

get_header（）；？>
$（“#测试鲍勃”）。单击（函数（）{
$（“#团队数据”）。切换（“慢速”，函数（）{
//动画完成。
});
});

到目前为止，我所拥有的对于第一个图像非常有用，但是当单击第二个图像时，第一个“图像”的内容会切换---这是因为ID只接受第一个元素。

看起来元素

和

在while循环中。您可以在jquery中按ID调用它们。ID应该是唯一的，将ID更改为类定义，如下所示（我假设js代码已经运行，只需要修改即可）：

//我只是在做需要的部分
// 

JS应该是：

 <script>
 // should wrapped inside document ready
 $(function(){ 
    $(document).on('click','.test-bob',function() {
      $(this).find(".team-data").toggle("slow" , function() {
         // animation complete.
      });
    });
 });
</script>  

//文件是否已包装好
$（函数（）{
$（文档）。在（'click'，'test bob'，function（）上{
$（this.find（“.team data”）.toggle（“slow”，function（））{
//动画完成。
});
});
});

---

希望这对你有用。如果没有，请回复评论。

非常感谢！这正是我要找的！

 <script>
 // should wrapped inside document ready
 $(function(){ 
    $(document).on('click','.test-bob',function() {
      $(this).find(".team-data").toggle("slow" , function() {
         // animation complete.
      });
    });
 });
</script>