ACFリピータフィールドイベントはすべて一緒

Question

をトリガ私はブートストラップから、このコードスニペットを使用しています：

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

私はその後、複数のカードを表示するには高度なカスタムフィールドリピータフィールドを作成しました。問題は、一度カードを起動すると、すべてがトリガーされることです。アクションを分ける方法はありますか？

リピータフィールドが統合されたコードですが、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は、もはや一意になるようにあなたは、このマークアップを繰り返していません - それを削除するか、各繰り返しアイテムのため、それが一意になります。

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

そして、JavaScriptで、代わりにその選択：

さて、私はあなたのボタンには、 'show' クラスを追加しました。私は、現在のコンテキストでslideTogglecardRevealするためにclosest()とnext()を使用しました：

$(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

の作業を参照してください。