CF Component变量未重置：模态框始终显示首个问题指令

兄弟，我太懂你这种踩坑的感觉了——循环生成的按钮全绑定到第一个（或固定某一个）问题的说明，本质上是循环上下文没正确捕获或者元素标识重复导致的，给你几个直接能用的解决方案：

1. 先排查最常见的问题：元素ID重复 #

循环生成模态框或按钮时，绝对不能用固定ID（比如modal-info），必须给每个元素加唯一后缀，比如用问题ID、循环索引或者查询的主键：

<cfloop query="yourQuestionsQuery">
    <tr>
        <td>#yourQuestionsQuery.questionText#</td>
        <td>
            <!-- 按钮：用自定义属性存对应模态框的ID -->
            <button class="btn-view-desc" data-target-modal="modal-desc-#yourQuestionsQuery.questionID#">
                查看说明
            </button>
            
            <!-- 模态框：ID唯一 -->
            <div class="modal" id="modal-desc-#yourQuestionsQuery.questionID#" style="display:none;">
                <div class="modal-body">
                    <h3>问题说明</h3>
                    <p>#yourQuestionsQuery.questionDescription#</p>
                    <button class="btn-close-modal">关闭</button>
                </div>
            </div>
        </td>
    </tr>
</cfloop>

2. 用事件委托绑定点击事件（最稳妥的写法） #

别在循环里逐个绑定事件（容易因为变量提升/闭包问题导致所有按钮引用同一个值），直接给父容器或document绑定事件，通过元素的类和自定义属性找到对应模态框：

// 绑定按钮点击事件
document.addEventListener('click', function(e) {
    // 判断点击的是查看说明按钮
    if (e.target.classList.contains('btn-view-desc')) {
        const modalId = e.target.getAttribute('data-target-modal');
        const targetModal = document.getElementById(modalId);
        // 显示模态框
        targetModal.style.display = 'block';
    }
});

// 绑定关闭按钮事件
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('btn-close-modal')) {
        // 找到最近的模态框父元素并隐藏
        e.target.closest('.modal').style.display = 'none';
    }
});

3. 如果用Bootstrap模态框的简化写法 #

如果你用的是Bootstrap的模态组件，可以直接利用它的data-bs-target属性，连JS都省了：

<cfloop query="yourQuestionsQuery">
    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modal-desc-#questionID#">
        查看说明
    </button>

    <div class="modal fade" id="modal-desc-#questionID#" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    #questionDescription#
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</cfloop>

为什么之前会出问题？ #

大概率是你之前的写法犯了这两个错误之一：

• 循环里所有模态框用了同一个ID，JS只会找到DOM中第一个匹配的元素；
• 在循环里直接给按钮绑定事件时，用了var声明循环变量（没有块级作用域），导致所有事件回调都引用最后一次循环的变量值。

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