Jquery 在 Wordpress 中切换

Question

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

内容已隐藏，因此在团队页面上只能看到图片。工作正常。

但现在我想在点击图片时切换隐藏内容。

到目前为止我所拥有的对于第一张图片效果很好，但是当点击第二张图片时，第一张 "image" 的内容会切换

所以我想我需要某种循环吗？

我是 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(); ?>

Answer 1

What i have till this far works great for the first image, but when second image is clicked, the content of the first "image" toggles --- this happen because the ID only take the first element.

看起来元素 <div id="test-bob"> 和 <section id="team-data"> 在 while 循环中。然后您通过 ID 在 jquery 中调用它们。 ID应该是唯一的，像这样将Id更改为class定义（我假设js代码已经可以工作并且只需要修改。）：

//I'm just taking the needed part
<div class="test-bob"> //<--- this
<?php 
  if ( has_post_thumbnail() ) {
    the_post_thumbnail( array( 200 , 200 ) );
  }
?>

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

JS应该是：

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

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

Jquery 在 Wordpress 中切换

Jquery Toggle in Wordpress

jquery

wordpress

toggle