循环数据并在 html 覆盖中显示

Question

我有一个用于显示名称字段的循环，以及一个用于显示数据库中存储的每个名称的类别的嵌套循环。

<?php if( get_field('servicos') ): ?>
                    <?php while( the_repeater_field('servicos') ): ?>
                        <?php while( the_repeater_field('servico') ): ?>
                            <h2 onclick="openNav()">
                                <?php the_sub_field('nome'); ?>
                            </h2>
                            <?php while( the_repeater_field('caegorias') ): ?>
                                <a href="#" class="color-white">
                                    <p><?php the_sub_field('categoria'); ?></p>
                                </a>
                            <?php endwhile; ?>
                            <div id="servicos-overlay" class="overlay-servicos">
                                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                                <div class="overlay-content uppercase">
                                    <?php while( the_repeater_field('caegorias') ): ?>
                                        <a href="#" class="color-white">
                                            <?php the_sub_field('categoria'); ?>
                                        </a>
                                    <?php endwhile; ?>
                                </div>
                            </div>
                        <?php endwhile; ?>
                    <?php endwhile; ?>
                <?php endif;?>

当点击相应的名称时，每个类别都必须在叠加层中打开。

单击名称时，将调用此 javascript 函数，并且叠加层会滑入屏幕。

function openNav() {
document.getElementById("servicos-overlay").style.width = "100%";
}

问题是当显示覆盖时，无论单击什么名称，覆盖中的数据始终是循环的第一圈。尽管触发了姓氏字段，但所有名称中都显示相同的类别。

如果我将 javascript 函数更改为循环 class="overlay-servicos"i 总是获取存储在数据库中的字段类别的最后一行。

有谁知道我如何打开覆盖在数据库中的名称对应的数据？

Ps：如果我删除覆盖，并在同一个 div 中循环数据，一切正常。

Answer 1

HTML 和 PHP

<?php if( get_field('servicos') ): ?>
    <?php $count = 0; ?>
    <?php while( the_repeater_field('servicos') ): ?>
        <?php while( the_repeater_field('servico') ): ?>
            <h2 onclick="openNav(<?php echo $count ?>)">
                <?php the_sub_field('nome'); ?>
            </h2>
            <?php while( the_repeater_field('caegorias') ): ?>
                <a href="#" class="color-white">
                    <p><?php the_sub_field('categoria'); ?></p>
                </a>
            <?php endwhile; ?>
            <div id="servicos-overlay-<?php echo $count ?>" class="overlay-servicos">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <div class="overlay-content uppercase">
                    <?php while( the_repeater_field('caegorias') ): ?>
                        <a href="#" class="color-white">
                            <?php the_sub_field('categoria'); ?>
                        </a>
                    <?php endwhile; ?>
                </div>
            </div>
            <?php $count++; ?>
        <?php endwhile; ?>
    <?php endwhile; ?>
<?php endif;?>

Javascript：

var current_i = 0;
function openNav(i) {
    closeNav();
    document.getElementById("servicos-overlay-" + i).style.width = "100%";
    current_i = i;
}

function closeNav() {
    document.getElementById("servicos-overlay-" + current_i).style.width = "0%";
}