ID序号不连续致下载按钮失效 无需改HTML的修复方案

原有脚本通过forEach遍历生成的从0开始的连续索引拼接元素ID，当页面中按钮的ID后缀序号不连续时，脚本拼接出的ID和实际HTML内的元素ID无法对应，找不到目标DOM节点，直接导致非连续序号的按钮功能失效。

无需修改任何已有的HTML内容，仅替换原有JS逻辑即可兼容所有ID序号场景：绑定点击事件时，直接从当前按钮关联的外层容器提取真实的ID后缀，后续元素查找全部使用这个真实后缀，完全不依赖遍历生成的连续索引，不管ID是否跳号、是否连续都能正常运行。
替换后的JS代码如下：

document.querySelectorAll(".download_button").forEach(function(item) {
  item.addEventListener("click", function(event) {
    event.preventDefault();
    var timeleft = 45;
    // 定位当前按钮对应的外层downloadbutton容器，提取真实ID后缀
    const btnWrapper = item.closest('[id^="downloadbutton"]');
    const realIndex = btnWrapper.id.replace('downloadbutton', '');
    // 提前缓存关联元素，减少重复DOM查询
    const downloadDom = document.getElementById('download' + realIndex);
    const timerDom = document.getElementById("timer" + realIndex);
    const targetUrl = btnWrapper.querySelector('a').href;

    var downloadTimer = setInterval(function() {
      downloadDom.style.display = "none";
      timerDom.innerHTML = "Wait " + timeleft;

      if (timeleft <= 0) {
        clearInterval(downloadTimer);
        timerDom.innerHTML = "";
        window.open(targetUrl, '_self');
        downloadDom.style.display = "";
      }
      timeleft -= 1;
    }, 1000);
  });
})

• 选择器[id^="downloadbutton"]会匹配所有id以downloadbutton开头的元素，不受后缀数字影响
• 提取的realIndex是HTML里实际存在的ID后缀，和遍历顺序无关，哪怕ID后缀跳号为5、10、100都能精准匹配
• 提前缓存需要操作的DOM和跳转地址，比原有逻辑减少了重复DOM查询，运行性能更好

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