为每个中继器字段创建唯一的标识

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的模式