爲每個中繼器字段創建唯一的標識

Question

我需要爲頁面上的每個產品框回顯唯一標識，因爲它們每個都有一個模式窗口。

我知道如何在循環中爲每個中繼器字段回顯一個唯一的ID。

但是..我有一箇中繼器內的中繼器。所以它只是重新啓動每個中繼器字段的循環，我只是得到相同的數字。

看到下面的圖片。 （應該要8），但它的重新開始循環，所以只有達到4

這裏是我的代碼：

<div class="container"> 

     <?php while(have_rows('product_sections')): the_row(); 

      $intro = get_sub_field('section_intro'); 
      $logo = get_sub_field('section_logo'); 

      ?> 


       <div class="sector-heading"> 
        <img src="<?php echo $logo; ?>"> 
        <div><?php echo $intro; ?></div> 
       </div> 


        <?php if(have_rows('products')): ?> 
         <?php $counter = 1; //this sets up the counter starting at 0 ?> 

         <div class="grid-wrapper"> 


          <?php while(have_rows('products')): the_row(); 

           $id = get_sub_field('id'); 
           $name = get_sub_field('product_name'); 
           $thumbnail = get_sub_field('thumbnail'); 
           $size = get_sub_field('product_size'); 
           $description = get_sub_field('product_description'); 
           $stockist = get_sub_field('stockist_link'); 
           $literature = get_sub_field('literature_link'); 

           ?> 


           <!--Start Single Product--> 
           <div class="grid-item"> 

            <div class="image-hovers"> 
             <img src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt'] ?>" title="<?php echo $thumbnail['title'] ?>"/> 
             <a class="js-open-modal" href="#" data-modal-id="<?php echo $id; ?>"><div class="product-hover"></div></a> 
            </div> 

            <div class="grid-title"> 
             <h2><?php echo $counter; // Prints the number of counted row ?> 
             </h2> 
            </div> 

           </div> 


            <!--Start Single Product Modal--> 
            <div id="<?php echo $id; ?>" class="modal-box"> 

             <a href="#" class="js-modal-close close">×</a> 

             <div class="modal-wrap"> 

              <div class="modal-img"> 
               <img src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt'] ?>" title="<?php echo $thumbnail['title'] ?>" /> 
              </div> 

              <div class="modal-content"> 
               <h2><?php echo $name; ?></h2> 
               <p><strong><?php echo $size; ?></strong></p> 
               <hr> 
               <?php echo $description; ?> 

               <br> 
               <?php if($stockist): ?> 
                <a href="<?php echo $stockist; ?>"><div class="modal-stockist">Find a Stockist</div></a> 
               <?php endif; ?> 
               <?php if($literature): ?> 
                <a href="<?php echo $literature; ?>"><div class="modal-literature">Literature</div></a> 
               <?php endif; ?> 
               <br></br> 
              </div> 

             </div> 

            </div> 
            <!--Close Single Product Modal--> 


           <?php $counter++; // add one per row ?> 
          <?php endwhile; // end of the loop. ?> 

         </div> 
         <!--End Grid Wrapper--> 

        <?php endif; ?> 
        <!-- Close product repeater field --> 


     <?php endwhile; // end of the loop. ?> 


    </div> 
    <!--End Container--> 

Answer 1

認爲像你的電腦一樣編碼

in n相關捐資環試舉的ID，以項目爲嵌套

因此改變你的嵌套模式起跑線

你的情況，你正在使用$計數器每一個產品上市。 將其用於每行或每行產品。 爲此移動$ counter = 1;在第一個while循環開始之前。

<div id="<?php echo $id; ?>" class="modal-box"> 

到

<div id="<?php echo $counter.$id; ?>" class="modal-box"> 

爲$計數器告訴這行的$ id告訴其產品，他們都講述了具體的產品從任何行。這將是獨一無二的，然後......

不要忘記追加$計數器，$ id其中要初始化的JS的模式