循环实现按钮点击触发模态框功能失效，求问题原因分析

问题描述 #

单个按钮控制模态框显示/隐藏的代码可正常运行，但为了避免重复编写56次对应showN/hideN/detailsN的代码，改用循环实现后功能失效。

原可正常运行的代码：

var target = document.getElementById('show1');
var currentOpacity = 0;
$(document).ready(function () {
  $("#hide1").click(function () {
    $("#details1").hide();
    target.style.opacity = currentOpacity + 1;
  });
  $("#show1").click(function () {
    $("#details1").show();
    target.style.opacity = currentOpacity - 1;
  });
});

尝试的循环代码（失效）：

const elements = [];
for (let i = 1; i <= 56; i++) {
$(document).ready(function () {
  document.getElementById('hide'+i).addEventListener('click',function ()
{
document.getElementById('details'+i).hide();
document.getElementById('show'+i).style.opacity = currentOpacity + 1; });
document.getElementById('show'+i).addEventListener('click',function () {
document.getElementById('details'+i).show();
document.getElementById('show'+i).style.opacity = currentOpacity - 1; });
});
}

失效原因分析 #

1. 原生DOM与jQuery方法混用错误：document.getElementById()返回的是原生DOM元素，没有jQuery提供的.hide()/.show()方法，直接调用会触发语法错误。
2. $(document).ready()位置错误：将ready事件绑定放在循环内部，会重复绑定56次ready回调，且ready事件触发时循环已执行完毕，可能导致元素获取逻辑异常。
3. 状态变量缺失且共用风险：循环代码未声明currentOpacity变量，且原代码中该变量为全局共用状态，若直接复用会导致所有按钮的透明度状态互相干扰，每个按钮应持有独立的透明度状态。
4. 事件回调内重复获取DOM元素：每次点击都重新查询DOM元素，既降低性能，也可能因DOM结构变化导致元素获取失败。

修复后的代码 #

方案一：jQuery简化实现 #

将循环放在ready回调内部，利用jQuery选择器避免方法混用，同时为每个按钮绑定独立状态：

$(document).ready(function () {
  for (let i = 1; i <= 56; i++) {
    const $details = $(`#details${i}`);
    const $showBtn = $(`#show${i}`);
    let currentOpacity = 0;

    $(`#hide${i}`).click(function () {
      $details.hide();
      $showBtn.css('opacity', currentOpacity + 1);
    });

    $showBtn.click(function () {
      $details.show();
      $showBtn.css('opacity', currentOpacity - 1);
    });
  }
});

方案二：原生JS实现 #

不依赖jQuery，用原生DOM API控制显示隐藏：

document.addEventListener('DOMContentLoaded', function () {
  for (let i = 1; i <= 56; i++) {
    const detailsEl = document.getElementById(`details${i}`);
    const showBtn = document.getElementById(`show${i}`);
    const hideBtn = document.getElementById(`hide${i}`);
    let currentOpacity = 0;

    hideBtn.addEventListener('click', function () {
      detailsEl.style.display = 'none';
      showBtn.style.opacity = currentOpacity + 1;
    });

    showBtn.addEventListener('click', function () {
      detailsEl.style.display = 'block'; // 可根据布局需求改为flex等其他值
      showBtn.style.opacity = currentOpacity - 1;
    });
  }
});

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