如何用JavaScript循环批量处理带编号的HTML模态框交互

问题背景 #

当前使用如下脚本实现单组按钮与模态框的交互，但页面共有56组对应元素，不想重复编写56次代码：

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 button1 = document.querySelector("#show1");
const readout1 = document.querySelector("p");
button1.addEventListener("mousemove", (e) => {
  const {
    x,
    y
  } = button1.getBoundingClientRect();
  button1.style.setProperty("--x", e.clientX - x);
  button1.style.setProperty("--y", e.clientY - y);
});

单个项目的HTML结构如下：

<section id="photo01" class="item-module-wrap">
  <div class="item-module">
    <div class="blurred-image" style="background-image: url('xxxxx');"></div>
    <div class="dot-texture"></div>
    <article>
      <div class="dgov-grid">
        <div class="dgov-col-sm-7 dgov-col-md-8 dgov-col-lg-9">
          <div class="main-photo-module">
            <div class="sticky">
              <h2>xxxxx</h2>
            </div>
            <div class="sticky"><span>xxxxx</span></div>
            <div class="sticky">
              <button type="button" id="show1" class="details-button shiny">Details</button>
            </div>
            <img src="xxxxx" alt="xxxxx"/> </div>
        </div>
        <div class="dgov-col-sm-5 dgov-col-md-4 dgov-col-lg-3">
          <div class="aside-module">
            <div class="details" id="details1">
              <div class="close" id="hide1"><i class="fa fa-times" aria-hidden="true"></i></div>
              <p class="description">xxxxx</p>
              <p class="extra">xxxxx</p>
              <p class="extra">xxxxx</p>
              <div class="social">
                xxxxx
              </div>
            </div>
            <div class="sticky">
              <time> 1 of 56 </time>
            </div>
            <div class="item-number layer" data-px-per-scroll="0.5" data-initial-position="450">01</div>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>

解决方案 #

可以通过提取公共逻辑+利用元素关联关系实现批量处理，无需重复编写代码，以下是两种可行方案：

方案1：基于ID后缀循环绑定事件 #

利用循环遍历1到56的数字，动态拼接ID选择器，统一绑定所有交互逻辑：

$(document).ready(function () {
  // 循环处理56组元素
  for (let i = 1; i <= 56; i++) {
    const showBtn = $(`#show${i}`);
    const detailsModal = $(`#details${i}`);
    const hideBtn = $(`#hide${i}`);
    const target = document.getElementById(`show${i}`);
    const currentOpacity = 0;

    // 显示模态框逻辑
    showBtn.click(function () {
      detailsModal.show();
      target.style.opacity = currentOpacity - 1;
    });

    // 隐藏模态框逻辑
    hideBtn.click(function () {
      detailsModal.hide();
      target.style.opacity = currentOpacity + 1;
    });

    // 按钮鼠标移动效果
    showBtn[0].addEventListener("mousemove", (e) => {
      const { x, y } = showBtn[0].getBoundingClientRect();
      showBtn[0].style.setProperty("--x", e.clientX - x);
      showBtn[0].style.setProperty("--y", e.clientY - y);
    });
  }
});

方案2：基于DOM结构的事件委托（更健壮） #

如果每组元素都包裹在.item-module-wrap容器内，可以利用事件委托，通过DOM层级关系定位对应元素，无需依赖ID后缀：

$(document).ready(function () {
  // 事件委托绑定显示按钮点击事件
  $(document).on('click', '.details-button', function() {
    const $btn = $(this);
    // 找到当前模块下的details模态框
    const $details = $btn.closest('.item-module-wrap').find('.details');
    $details.show();
    $btn[0].style.opacity = -1; // 对应原currentOpacity=0的逻辑
  });

  // 事件委托绑定关闭按钮点击事件
  $(document).on('click', '.close', function() {
    const $closeBtn = $(this);
    const $details = $closeBtn.closest('.details');
    $details.hide();
    // 找到当前模块下的show按钮
    const $showBtn = $closeBtn.closest('.item-module-wrap').find('.details-button');
    $showBtn[0].style.opacity = 1;
  });

  // 按钮鼠标移动效果批量绑定
  $('.details-button').each(function() {
    const button = this;
    button.addEventListener('mousemove', (e) => {
      const { x, y } = button.getBoundingClientRect();
      button.style.setProperty('--x', e.clientX - x);
      button.style.setProperty('--y', e.clientY - y);
    });
  });
});

方案对比 #

• 方案1：依赖ID的数字后缀，逻辑直接，适合现有ID规则明确的场景，修改成本低。
• 方案2：不依赖ID，通过DOM结构关系定位元素，代码更健壮，后续新增元素无需修改JS代码，扩展性更好。

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