如何更新循环包含Post ID，实现员工图片关联专属弹窗

• 重复ID冲突：循环里反复生成id="overlay"、id="popup"、id="popupclose"这类重复ID，HTML要求ID必须唯一，getElementById只会返回第一个匹配元素，这是只有第一个弹窗能触发的核心原因。
• 团队ID未动态赋值：$teamid = get_the_ID();写在循环外，导致所有员工链接的ID都是同一个固定值，无法区分不同员工。
• 事件绑定仅生效于第一个元素：脚本只获取了第一个弹窗和链接的DOM对象，后续元素没有绑定任何点击事件。

<?php
$panelhead = $args['panelhead'];
$panelintro = $args['panelintro'];
?>
<div class="fullcol pb-team-panel pb-padding">
    <div class="midcol clearfix">
        <div class="fullcol copy-wrapper clearfix">
            <div class="team-intro copycol anim-target bottomfade-fm-dm">
                <h3><?php echo $panelhead; ?></h3>
                <p><?php echo $panelintro; ?></p>
            </div>
        </div>
        <div class="fullcol team-grid">
            <?php 
            $recent = new WP_Query("post_type=team&posts_per_page=-1"); 
            while($recent->have_posts()) : $recent->the_post();
                $teamimg = get_field('team_image');
                // 循环内获取当前员工的唯一ID
                $current_team_id = get_the_ID();
            ?>

            <!-- 弹窗：生成唯一ID标识 -->
            <div class="overlay" id="overlay-<?php echo $current_team_id; ?>"></div>
            <div class="popup" id="popup-<?php echo $current_team_id; ?>">
                <div class="popupcontrols">
                    <!-- 关闭按钮绑定当前弹窗ID -->
                    <span class="popupclose" data-popup-id="<?php echo $current_team_id; ?>">X</span>
                </div>
                <div class="popupcontent">
                    <div class="g3">
                        <img src="<?php echo $teamimg['url']; ?>" />
                        <a class="nexbtn" href="<?php the_field('team_linkedin'); ?>" target="_blank" rel="noopener noreferrer">Follow <?php the_title(); ?> on LinkedIn</a>
                    </div>
                    <div class="g7">
                        <h4><?php the_title(); ?></h4>
                        <p><?php the_field('team_bio'); ?></p>
                    </div>
                </div>
            </div>
            <!-- 弹窗结束 -->

            <!-- 员工卡片：用类代替重复ID，通过data属性关联弹窗 -->
            <div class="team-item anim-target bottomfade-fm-dm">           
                <a class="team-link" data-popup-id="<?php echo $current_team_id; ?>">
                    <div class="team-image bg-image rounded-box" style="background-image: url(<?php echo $teamimg['url']; ?>);">
                    </div>
                    <h4><?php the_title(); ?></h4>
                    <p><?php the_field('team_jobtitle'); ?></p>
                </a>
            </div>

            <?php endwhile; wp_reset_postdata(); ?>
        </div>
    </div>
</div>

<script>
// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    // 绑定所有员工链接的点击事件
    document.querySelectorAll('.team-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const popupId = this.getAttribute('data-popup-id');
            // 显示对应弹窗和遮罩
            document.getElementById(`overlay-${popupId}`).style.display = 'inline-block';
            document.getElementById(`popup-${popupId}`).style.display = 'inline-block';
        });
    });

    // 绑定所有关闭按钮的点击事件
    document.querySelectorAll('.popupclose').forEach(btn => {
        btn.addEventListener('click', function() {
            const popupId = this.getAttribute('data-popup-id');
            document.getElementById(`overlay-${popupId}`).style.display = 'none';
            document.getElementById(`popup-${popupId}`).style.display = 'none';
        });
    });

    // 可选：点击遮罩关闭对应弹窗
    document.querySelectorAll('.overlay').forEach(overlay => {
        overlay.addEventListener('click', function() {
            const popupId = this.id.replace('overlay-', '');
            this.style.display = 'none';
            document.getElementById(`popup-${popupId}`).style.display = 'none';
        });
    });
});
</script>

1. 唯一ID生成：循环内获取当前员工的$current_team_id，给每个弹窗、遮罩生成唯一ID（如popup-123、overlay-123），同时移除重复的id="team-item"改用类名。
2. 数据关联：员工链接和关闭按钮添加data-popup-id属性，直接关联对应的弹窗ID，实现点击对应弹窗的效果。
3. 批量事件绑定：用querySelectorAll批量获取所有目标元素，循环绑定点击事件，确保每个元素都能触发对应逻辑，同时用DOMContentLoaded避免DOM未加载完成导致的绑定失败。
4. 细节修复：修正了原代码中target的拼写错误（写成taret）。

内容的提问来源于stack exchange，提问作者Lauren