モーダルポップアップごとに画像が表示されない

Question

ここでは、異なる内容の異なる画像を表示しています。モーダルポップアップを使用して、より多くのコンテンツを表示しています。画像がモーダルポップアップの外側に表示されているのは正しいですが、モーダルポップアップをもっと読むと選択すると、モーダルポップアップの最初の画像と同じ画像が表示されます。 私のコードは次のようなものです：

<div class="row"> 
           <?php 
             if(have_rows('blog_sub_content')): 
             $i=0; 
             while(have_rows('blog_sub_content')): the_row(); 

             $blg_image   = get_sub_field('blg_image'); 
             $blg_title   = get_sub_field('blg_title'); 
             $blg_posted_name = get_sub_field('blg_posted_name'); 
             $blg_content  = get_sub_field('blg_content'); 


             ?> 
            <div class="col-sm-4"> 
             <div class="single-blog"> 
              <img src="<?php echo $blg_image['url'] ; ?>" alt="" /> 
              <h2><?php echo $blg_title; ?></h2> 
              <ul class="post-meta"> 
               <li><i class="fa fa-pencil-square-o"></i><strong> Posted By:</strong> <?php echo $blg_posted_name; ?></li> 
               <li><i class="fa fa-clock-o"></i><strong> Posted On:</strong> Apr 15 2014</li> 
              </ul> 
              <div class="blog-content"> 
               <?php echo substr(strip_tags($blg_content), 0, 144); ?> 
              </div> 
              <a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-detail">Read More</a> 
             </div> 

<div class="modal fade" id="blog-detail" tabindex="-1" role="dialog" aria-hidden="true"> 
              <div class="modal-dialog"> 
               <div class="modal-content"> 
                <div class="modal-body"> 
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
                 <img src="<?php echo $blg_image['url']; ?>" alt="" /> 
                 <h2><?php echo $blg_title; ?></h2> 
                 <?php echo $blg_content; ?> 
                </div> 
               </div> 
              </div> 
             </div> 
            </div> 
            <?php 

            if($i==2) 
            { ?> 
            <div class="clearfix"></div> 
            <?php } 
            $i++; 
             endwhile; 
             endif; 

             ?> 

            </div> 
           </div> 

Answer 1

私は私の答えを得た：

私はこのようにそれを呼び出すために、異なるidため$iを使用する必要があります。その後、

<a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-detail_<?php echo $i;?>">Read More</a> 

そして、

<div class="modal fade" id="blog-detail_<?php echo $i;?>" tabindex="-1" role="dialog" aria-hidden="true"> 

フルコード：

<div class="col-sm-4"> 
            <div class="single-blog"> 
             <img src="<?php echo $blg_image['url'] ; ?>" alt="" /> 
             <h2><?php echo $blg_title; ?></h2> 
             <ul class="post-meta"> 
              <li><i class="fa fa-pencil-square-o"></i><strong> Posted By:</strong> <?php echo $blg_posted_name; ?></li> 
              <li><i class="fa fa-clock-o"></i><strong> Posted On:</strong> Apr 15 2014</li> 
             </ul> 
             <div class="blog-content"> 
              <?php echo substr(($blg_content), 0, 147); ?> 
             </div> 
             <a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-detail_<?php echo $i;?>">Read More</a> 
            </div> 
            <div class="modal fade" id="blog-detail_<?php echo $i;?>" tabindex="-1" role="dialog" aria-hidden="true"> 
             <div class="modal-dialog"> 
              <div class="modal-content"> 
               <div class="modal-body"> 
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
                <img src="<?php echo $blg_image['url']; ?>" alt="" /> 
                <h2><?php echo $blg_title; ?></h2> 
                <?php echo $blg_content; ?> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div>