ACF 中继器字段事件一起触发答案

【问题标题】：ACF Repeater field events triggering all togetherACF 中继器字段事件一起触发
【发布时间】：2018-01-08 10:22:29
【问题描述】：

我正在使用 Bootstrap 中的这段代码 sn-p：

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

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

这是我集成了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>

【问题讨论】：

标签： javascript html wordpress twitter-bootstrap advanced-custom-fields

【解决方案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>

【讨论】：

【解决方案2】：

第一件事是第一件事：您正在重复此标记，因此show 的 ID 不再是唯一的 - 删除它或使其对每个重复的项目都是唯一的。

现在，我为您的按钮添加了一个“显示”类：

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

并且，在 JavaScript 中，选择了它。我在当前上下文中使用了closest() 和next() 以便slideToggle 和cardReveal：

$(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');
    });
});

看到它在工作here

【讨论】：