ACF循环渲染数据时，HTML弹窗无法匹配对应分类的问题求助

你遇到的核心问题是DOM元素ID的唯一性规则：所有弹窗都使用了同一个id="servicos-overlay"，而浏览器中getElementById()只会返回第一个匹配该ID的元素，所以无论点击哪个标题，打开的都是第一个弹窗。如果改用类名批量操作，又会因为循环中重复选择所有类元素，最终只对最后一个弹窗生效。

我们需要给每个弹窗生成唯一的ID标识，并让标题的点击事件精准绑定到对应ID的弹窗上。具体实现步骤如下：

1. 引入计数器生成唯一标识 #

在循环开始前初始化一个计数器，每次遍历servico字段时递增，用它来区分不同的弹窗和标题。

2. 绑定标题与对应弹窗的ID #

修改openNav()函数，让它接收唯一的弹窗ID作为参数，点击标题时传递对应弹窗的ID。

3. 给弹窗设置唯一ID并同步关闭事件 #

给每个弹窗设置带计数器后缀的唯一ID，同时让关闭按钮的closeNav()也传递这个ID，确保关闭的是当前打开的弹窗。

修改后的完整代码 #

PHP渲染部分 #

<?php if( get_field('servicos') ): ?>
<?php $servicoCounter = 0; // 初始化计数器 ?>
<?php while( the_repeater_field('servicos') ): ?>
<?php while( the_repeater_field('servico') ): ?>
<?php $servicoCounter++; // 每次循环递增，生成唯一ID后缀 ?>
<h2 onclick="openNav('servicos-overlay-<?php echo $servicoCounter; ?>')">
    <?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; ?>

<!-- 带唯一ID的弹窗 -->
<div id="servicos-overlay-<?php echo $servicoCounter; ?>" class="overlay-servicos">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav('servicos-overlay-<?php echo $servicoCounter; ?>')">&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(overlayId) {
    document.getElementById(overlayId).style.width = "100%";
}

function closeNav(overlayId) {
    document.getElementById(overlayId).style.width = "0%";
}

额外优化建议 #

• 如果你的servico字段有内置的唯一标识符（比如ACF字段的行ID），可以用它代替计数器，逻辑会更稳妥。
• 可以用事件委托代替内联onclick，让代码更简洁易维护：给所有标题添加统一类名，通过父元素监听点击事件，再通过元素关联的属性（比如data-overlay-id）获取对应的弹窗ID。

内容的提问来源于stack exchange，提问作者André Castro