Question

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

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>

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>

Answer 2

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

现在，我已经添加了一个＆＃39; show＆＃39;按到你的按钮：

<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

ACF Repeater现场事件一起触发所有

2 个答案: