Question

我需要为页面上的每个产品框回显一个唯一的ID，因为它们每个都有一个模态窗口。

我知道如何在循环中回显每个转发器字段的唯一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

在进行编码时像计算机一样思考

嵌套循环中的

尝试将id作为嵌套

提供给项目

所以将嵌套的模态起始行更改为

在您的情况下，您为每个产品列表使用$ counter。用于每一行或每行产品。对于那次移动，$ counter = 1;第一个while循环开始之前的行。

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

到

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

因为$ counter告诉哪一行和$ id告诉哪个产品，他们都告诉任何行的特定产品。那将是独一无二的......

请勿忘记使用$ id附加$ counter来初始化模态的js

为每个转发器字段创建唯一ID

1 个答案: