javascript - ACF 中继器现场事件同时触发

Question

我正在使用 Bootstrap 中的代码片段:

<强> https://bootsnipp.com/snippets/featured/material-card-reveal-with-image-effect

然后，我创建了一个高级自定义字段重复字段来显示多张卡片。问题是，一旦我触发一张卡，它们都会被触发。有没有办法分离 Action ？

这是我集成了转发器字段的代码，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>

Answer 1

处理此问题的最佳方法是在模式和随附触发器上放置一个唯一的 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>