PHP数据无法在JavaScript弹窗中正确对应显示的问题求助

问题根源 #

1. 循环生成的所有弹窗都使用同一个ID popup-1，DOM要求ID必须唯一，最终只有最后一个弹窗会被正确识别，所有按钮点击都会触发这个最后弹窗。
2. togglePopup 函数固定操作 popup-1，没有区分不同帖子的弹窗实例。

修复步骤 #

1. 给每个弹窗生成唯一ID，绑定帖子的唯一标识（比如数据库主键 $PostID）
2. 修改 togglePopup 函数，让它接收帖子ID参数，动态定位到对应弹窗
3. 所有调用弹窗的按钮（包括编辑按钮和关闭按钮），都传入当前帖子的ID

修改后的代码 #

JavaScript 部分 #

function togglePopup(postId) {
    const popup = document.getElementById(`popup-${postId}`);
    if (popup) {
        popup.classList.toggle("active");
    }
}

PHP循环内的HTML部分 #

<!-- 每个帖子的弹窗，ID绑定PostID确保唯一 -->
<div class="popup" id="popup-<?php echo $PostID; ?>">
    <div class="overlay"></div>
    <div class="content">
        <!-- 关闭按钮也要传入当前帖子ID -->
        <div class="close-btn" onclick="togglePopup(<?php echo $PostID; ?>)">&times;</div>
        <h1>Edit Post</h1>
        <p><?php echo htmlspecialchars($Text, ENT_QUOTES); ?></p>
    </div>
</div>

<div class="postBox">
    <img class="postprofilepicture" src="../profilepictures/<?php echo htmlspecialchars($ProfilePicture, ENT_QUOTES); ?>">
    <p class="postusername"><?php echo htmlspecialchars($UserName, ENT_QUOTES); ?></p>
    <p class="posttime"><?php echo date('M jS, Y h:ia', strtotime($Date)); ?></p>
    <p><?php echo htmlspecialchars($Text, ENT_QUOTES); ?></p>
    <br>
    <div class="dropdown">
        <button onclick="myFunction(this)" class="dropbtn">···</button>
        <!-- 下拉菜单ID也建议绑定PostID，避免多个菜单冲突 -->
        <div id="myDropdown-<?php echo $PostID; ?>" class="dropdown-content">                                         
            <a href="#View">View</a>
            <a href="#Like">Like</a>
            <a href="#Save">Save</a>
            <a href="../editpost">Edit</a>
            <!-- 弹窗按钮传入当前帖子ID -->
            <button onclick="togglePopup(<?php echo $PostID; ?>)">Popup</button>
        </div>
    </div>
</div>

额外提示 #

• 确保 $PostID 是每个帖子的唯一标识（比如数据库自增ID）
• 使用 htmlspecialchars() 输出变量，避免XSS注入风险
• 下拉菜单的ID也做了唯一化处理，防止多个帖子的下拉菜单功能冲突

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