Javascript ACF中继器现场事件一起触发

我使用的代码片段来自引导：

然后我创建了一个高级自定义字段repeater字段来显示多张卡。问题是，一旦我触发一张牌，它们都会被触发。有没有办法把动作分开

这是我集成了repeater字段的代码，CSS和JS与Bootstrap演示相同

<div class="container">
    <div class="row">    

        <?php if( have_rows('team') ): ?>
            <?php while( have_rows('team') ): the_row(); 

                $image = get_sub_field('image');
                $position = get_sub_field('position');
                $name = get_sub_field('name');
                $bio = get_sub_field('bio');

                ?>        

                <div class="small-12 medium-4 large-3 columns">
                    <div class="card">
                        <div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
                        <button id="show">
                            <div class="card-content light-grey-bg center text-center">
                                <span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>                    
                            </div>

                            <div class="card-action blue-bg center text-center valign">
                                <p class="hind bold white caps"><?php echo $name; ?></p>
                            </div>
                        </button>
                        <div class="card-reveal">
                            <span class="card-title"><?php echo $name; ?></span>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <p><?php echo $bio; ?></p>
                        </div>
                    </div>
                </div>

            <?php endwhile; ?>
        <?php endif; ?>       

    </div>
</div>

---

处理此问题的最佳方法是在模式和伴随的触发器上放置一个唯一的ID。它们都在同一时间开火，因为它们都有相同的触发器。您可以使用计数来生成唯一ID。您的javascript也必须在循环中，或者您只为JS重复循环

<div class="container">
    <div class="row">    

        <?php if( have_rows('team') ): ?>
            <?php $count = 1;?>
            <?php while( have_rows('team') ): the_row(); 

                $image = get_sub_field('image');
                $position = get_sub_field('position');
                $name = get_sub_field('name');
                $bio = get_sub_field('bio');

                ?>        

                <div class="small-12 medium-4 large-3 columns">
                    <div class="card">
                        <div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
                        <button id="show<?php echo $count; ?>">
                            <div class="card-content light-grey-bg center text-center">
                                <span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>                    
                            </div>

                            <div class="card-action blue-bg center text-center valign">
                                <p class="hind bold white caps"><?php echo $name; ?></p>
                            </div>
                        </button>
                        <div class="card-reveal panel<?php echo $count; ?>">
                            <span class="card-title"><?php echo $name; ?></span>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <p><?php echo $bio; ?></p>
                        </div>
                    </div>
                </div>
       <script>
       $(function(){

           $('#show<?php echo $count; ?>').on('click',function(){        
            $('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
           });

          $('.card-reveal panel<?php echo $count; ?> .close').on('click',function(){
            $('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
          });
       });
      </script>
               <?php $count++;  ?>  
            <?php endwhile; ?>
        <?php endif; ?>       

    </div>
</div>

---

第一件事是：您正在重复此标记，以便显示的ID不再唯一-删除它或使其对每个重复项唯一

现在，我在按钮中添加了一个“show”类：

<button type="button" class="show btn btn-custom pull-right" aria-label="Left Align">
    <i class="fa fa-ellipsis-v"></i>
</button>

看到它工作了吗

$(function(){
    $('.show').on('click',function(){        
        $(this).closest('.card-content').nextAll('.card-reveal').slideToggle('slow');
    });

    $('.card-reveal .close').on('click',function(){
        $(this).closest('.card-reveal').slideToggle('slow');
    });
});