PHP与MySQL开发求助：HTML/JS弹窗仅显示数据库首行数据问题

嘿，我一眼就看出问题啦——你所有的弹窗都用了同一个id="popup-1"，而且点击按钮调用的togglePopup()函数没有指定要操作哪个弹窗，所以不管点哪个按钮，JS都会找到第一个id为popup-1的弹窗，自然显示的都是第一条数据的内容。

下面是具体的修改方案，分三步搞定：

1. 给每个弹窗生成唯一ID #

在循环里，我们用一个计数器来给每个弹窗生成不一样的ID，避免ID重复导致JS无法区分弹窗。如果你担心计数器不够直观，也可以结合assignmentName（记得用urlencode处理特殊字符）来生成ID。

2. 修改按钮的点击事件，传递对应弹窗ID #

让每个按钮点击时，把自己对应的弹窗ID传给togglePopup()函数，这样函数就知道要操作哪个弹窗了。关闭按钮也要做同样的修改哦。

3. 更新JS的togglePopup()函数，接收ID参数 #

修改函数逻辑，根据传入的ID找到对应的弹窗，控制它的显示/隐藏状态。

修改后的完整代码： #

<?php
$sql = "SELECT dueDate, assignmentName, className FROM assignments INNER JOIN classes ON assignments.class = classes.id ORDER BY DATE(dueDate)";
if($result = mysqli_query($link, $sql)){
    if(mysqli_num_rows($result) > 0){
        echo "<h3>Assignments</h3>";
        $popupCounter = 1; // 初始化计数器，生成唯一ID
        while($row = mysqli_fetch_array($result)){
            $uniquePopupId = "popup-" . $popupCounter;
            echo '<div class="popup" id="' . $uniquePopupId . '">';
            echo '<div class="overlay"></div>';
            echo '<div class = "content">' . $row['dueDate'] . ' | ' . $row['className'] . '</div>';
            echo '<div class="close-btn content" onclick="togglePopup(\'' . $uniquePopupId . '\')">&times;</div>';
            echo '<div class = "btn-group">' . '<button onclick="togglePopup(\'' . $uniquePopupId . '\')">' . $row['assignmentName'] . '</button>' . '</div>';
            echo '</div>';
            $popupCounter++; // 计数器递增，确保每个ID唯一
        }
    }
}
?>

<script>
function togglePopup(popupId) {
    const targetPopup = document.getElementById(popupId);
    // 假设你用.active类控制弹窗显示/隐藏，需配合CSS设置弹窗默认隐藏、.active时显示
    targetPopup.classList.toggle("active");
    
    // 如果你的弹窗是用display属性控制，替换成下面的代码：
    // targetPopup.style.display = targetPopup.style.display === "block" ? "none" : "block";
}
</script>

额外小提示： #

• 我给Assignments加了<h3>标签，让页面结构更规范；还给内容里的日期和班级加了分隔符，可读性更好。
• 记得在CSS里设置.popup的默认隐藏样式，比如display: none;，然后.popup.active { display: block; }，这样弹窗的显示隐藏才会生效。

这样修改后，每个按钮点击都会触发对应弹窗的显示，内容就和按钮的assignmentName完美匹配啦！

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