ブートストラップ・モーダルを各スライド（カスタム・ポスト・タイプ）に対して動的に開くようにするにはどうすればよいですか？

Question

私は完全に動作し、すべてのカスタムポストタイプの画像とテキストを生成するスライダーを持っています。今度はモーダルのスライダのコンテンツをクリックして、モーダルのコンテンツの一部を開いて、高度なカスタムフィールドで設定した説明フィールドを開く必要があります。すべてのヘルプは非常にいただければ幸いです

<div id="it-list" class="container section"> 
    <div class="section-wrapper"> 
     <h3 class="widget-title"><span>2016 "IT LIST" HONOREES</span></h3>  
     <div class="slide-wrapper"> 
     <div class="it-list-slide"> 
     <?php 

    wp_reset_postdata(); 
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 

    $args = array(
     'post_type' => 'ddg-itlist', 
     'numberposts' => -1, 
     'orderby' => 'rand', 
    ); 

    $postslist = get_posts($args); 

    foreach ($postslist as $post) : setup_postdata($post); 
    $featuretitle = get_the_title($post->ID); 
    $post_id = get_the_id(); 
    $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); 
    ?> 
    <div class="main-slide-div col-sm-4 center"> 
     <a href="#" class="modal-toggle" data-toggle="modal" data-target="#post<?php echo $post_id; ?>"> 
      <div class="it-list-profile-image" style="background-image: url('<?php echo $thumb['0']; ?>');"></div> 
      <h4 class="it-list-profile-title"><?php echo $featuretitle; ?></h4> 
      <p class="itlist-profile-jobtitle"><?php the_field('job_title'); ?></p> 
      <img src="<?php the_field('company_logo'); ?>" class="slide-logo"> 
     </a> 
    </div><!-- end of main slide div --> 

          <!-- Modal --> 
<div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     <div class="modal-body"> 
     <div class="it-list-profile"> 
      <div class="it-list-profile-info"> 
       <div class="row"> 
        <div class="it-list-profile-image modal-profile-img col-xs-4 col-sm-4 col-md-5" style="background-image: url('<?php echo $thumb['0']; ?>');"> 
        </div><!-- end of modal-profile-image --> 
        <div class="col-xs-8 col-sm-8 col-md-7"> 
         <h1><?php echo $featuretitle; ?></h1> 
         <p class="itlist-profile-jobtitle"><?php the_field('job_title'); ?></p> 
         <img src="<?php the_field('company_logo'); ?>" class="slide-logo"> 
         <p class="itlist-profile-jobtitle"><?php the_field('description_quote'); ?></p> 
        </div><!-- end of text and logo --> 
       </div><!-- end of row --> 
      </div><!-- end of it-list-profile-info --> 
      <div class="it-list-description"> 
       <p><?php the_field('description_paragraph'); ?></p> 
      </div><!-- end of it-list-description --> 
     </div><!-- end of it-list profile --> 
     </div><!-- end of modal body --> 
     <!-- <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> --> 
    </div><!-- end of modal content --> 
    </div><!-- end of modal dialog --> 
</div><!-- end of modal --> 


    <?php endforeach; ?> 
</div><!-- end of it slide --> 
</div><!-- end of slide wrapper --> 

：これは、スライダコンポーネントのコードです。

Answer 1

ループの各ポストに異なるモーダルを指定する最も簡単な方法は、データトグルセレクタとモーダルクラスをインクリメントすることです。これを行うには、ループの直前に次の行を使用します。

<?php $i = 0;?> 

は、次にループ使用中に -

data-target='.modal<?php echo $i;?>' 

- 次に

<?php $i++;?> 

データ・ターゲット・セレクタのようなものを置きます10

モーダルクラスとして - このことができます

class='modal modal<?php echo $i;?>' 

希望と私はあなたの質問を正しく理解してきました！