PHP foreach循环生成模态框无法显示对应行数据的修复方案

问题 #

我有一个从数据库获取数据并展示的列表，点击每行的CTA按钮时，应触发模态框并展示该行对应的数据库数据。数据通过PHP的foreach循环进行渲染，且已根据数据库表的行ID为每个模态框分配了对应的ID。但当前功能点击任意行仅显示第一行或最后一行的数据，而非对应ID的行数据，需要修改代码解决该问题。

原因分析 #

1. 模态框选择器逻辑错误：原JS中document.querySelector('.modal')只会匹配页面中第一个带.modal类的元素，导致所有按钮都操作同一个模态框。
2. 触发与目标无关联：原toggleModal函数没有接收目标模态框的标识，无法区分要操作的对象。
3. 按钮与模态框未绑定：触发按钮没有携带对应模态框的ID信息，无法定位到正确的模态框。

修改方案 #

1. 调整PHP/HTML代码 #

给触发按钮、模态框及关闭元素添加关联标识，并渲染对应行的数据：

<?php $results = getReservations(); foreach ($results as $row) { ?>
    <!-- 列表行与触发按钮 -->
    <div class="reservation-row">
        <!-- 示例列表内容，替换为实际字段 -->
        <p>预约ID：<?php echo $row['id']; ?></p>
        <button class="modal-open" data-modal-id="<?php echo $row['id']; ?>">查看详情</button>
    </div>

    <!-- 对应ID的模态框 -->
    <div id="modal-<?php echo $row['id']; ?>" class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
        <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50" data-modal-id="<?php echo $row['id']; ?>"></div>
        <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
            <div class="modal-content py-4 text-left px-6">
                <div class="flex justify-between items-center pb-3">
                    <p class="text-2xl font-bold">预约详情 #<?php echo $row['id']; ?></p>
                    <div class="modal-close cursor-pointer z-50" data-modal-id="<?php echo $row['id']; ?>">
                        <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                        </svg>
                    </div>
                </div>
                <!-- 渲染当前行的数据库数据，替换为实际表字段 -->
                <div class="reservation-details">
                    <p>客户姓名：<?php echo isset($row['customer_name']) ? $row['customer_name'] : '无'; ?></p>
                    <p>预约时间：<?php echo isset($row['reservation_time']) ? $row['reservation_time'] : '无'; ?></p>
                    <!-- 其他字段按需添加 -->
                </div>
            </div>
        </div>
    </div>
<?php } ?>

• 给触发按钮、遮罩、关闭按钮添加data-modal-id属性，值为对应行的ID，建立关联。
• 模态框ID改为modal-<?php echo $row['id']; ?>，避免ID冲突。
• 在模态框内渲染当前行的实际数据，添加isset判断避免字段不存在报错。

2. 修改JavaScript代码 #

调整事件绑定逻辑，传递目标模态框ID，精准操作对应模态框：

// 绑定打开模态框事件
const openButtons = document.querySelectorAll('.modal-open');
openButtons.forEach(button => {
    button.addEventListener('click', (e) => {
        e.preventDefault();
        const modalId = button.getAttribute('data-modal-id');
        toggleModal(modalId);
    });
});

// 绑定遮罩关闭事件
const overlays = document.querySelectorAll('.modal-overlay');
overlays.forEach(overlay => {
    overlay.addEventListener('click', () => {
        const modalId = overlay.getAttribute('data-modal-id');
        toggleModal(modalId);
    });
});

// 绑定关闭按钮事件
const closeButtons = document.querySelectorAll('.modal-close');
closeButtons.forEach(button => {
    button.addEventListener('click', () => {
        const modalId = button.getAttribute('data-modal-id');
        toggleModal(modalId);
    });
});

// 精准控制指定模态框的显示/隐藏
function toggleModal(modalId) {
    const body = document.querySelector('body');
    const modal = document.getElementById(`modal-${modalId}`);
    if (!modal) return; // 避免找不到模态框时报错

    modal.classList.toggle('opacity-0');
    modal.classList.toggle('pointer-events-none');
    body.classList.toggle('modal-active');
}

• 使用forEach替代传统for循环，代码更简洁。
• 所有触发事件都通过data-modal-id获取目标模态框ID，传递给toggleModal函数。
• 通过getElementById精准获取对应模态框，避免操作错误的元素。
• 添加模态框不存在的判断，提升代码健壮性。

内容的提问来源于stack exchange，提问作者papalatong.dev