点击按钮时在循环中获取数组对应ID的技术问题求助

咱们来拆解一下你代码里的问题，然后一步步修复：

核心问题分析 #

1. 闭包陷阱：你在for循环里给#bttn绑定点击事件，但事件触发时循环已经执行完毕，i的值会变成循环结束后的4，导致每次点击都取到不存在的jobid-4。
2. 克隆元素的内容更新错误：你每次克隆后修改的是全局的jobtitle、jbtype等元素，而非克隆出来的clone内部节点，所有职位卡片的内容都会变成最后一条数据。
3. 冗余的sessionStorage依赖：完全没必要用sessionStorage存ID，直接把ID绑定到按钮的自定义属性上，点击时读取更可靠。

修改后的代码（带注释） #

function jobHome() {
  const token = "rnxdQFzTU-YuzViH78aH";
  // 获取模板节点（建议给模板加专属类名，避免和其他节点冲突）
  const templateRow = document.querySelector("#brdr");
  const container = document.getElementById("conte");

  $.ajax({
    url: "https://successsroadv2.herokuapp.com/api/v1/Jobhome",
    type: "GET",
    dataType: "json",
    headers: {
      "Content-Type": "application/json",
      Authorization: token
    },
    success: function (data) {
      container.innerHTML = ""; // 清空容器

      // 循环渲染前4条数据
      for (let i = 0; i <= 3; i++) {
        const jobData = data[i];
        if (!jobData) continue; // 防止数据不足时出错

        // 深克隆模板节点
        const clone = templateRow.cloneNode(true);
        clone.removeAttribute("id"); // 移除模板的ID，避免页面重复ID

        // 更新当前克隆节点内的内容（关键：操作clone内部元素）
        clone.querySelector("#titleforjob").innerHTML = jobData.title;
        clone.querySelector("#txs1").innerHTML = jobData.jtype;
        clone.querySelector("#txs2").innerHTML = jobData.address;
        clone.querySelector("#txs3").innerHTML = jobData.created_at;

        // 获取克隆节点内的按钮，绑定职位ID到自定义属性
        const btn = clone.querySelector("#bttn");
        btn.setAttribute("data-job-id", jobData.id);
        btn.removeAttribute("id"); // 移除按钮的ID，避免重复

        // 给当前按钮绑定点击事件
        btn.addEventListener("click", function() {
          const jobId = this.getAttribute("data-job-id"); // 直接从按钮取ID
          const hedtitle = document.getElementById("headertitle");
          const jbtime = document.getElementById("txt3");
          const jbaddress = document.getElementById("txt2");
          const jbtype = document.getElementById("txt1");
          const desc = document.getElementById("description");

          $.ajax({
            url: `https://successsroadv2.herokuapp.com/api/v1/Jobhome/${jobId}`,
            type: "GET",
            dataType: "json",
            headers: {
              "Content-Type": "application/json",
              Authorization: token
            },
            success: function (detailData) {
              hedtitle.innerHTML = detailData.title;
              jbtype.innerHTML = detailData.jtype;
              jbaddress.innerHTML = detailData.address;
              jbtime.innerHTML = detailData.created_at;
              // desc.innerHTML = detailData.desc;
            },
            error: function (error) {
              console.log(`Error ${error}`);
            }
          });
        });

        // 将配置好的克隆节点添加到容器
        container.appendChild(clone);
      }
    },
    error: function (error) {
      console.log(`Error ${error}`);
    }
  });
}

$(document).ready(function () {
  jobHome();
});

关键改动说明 #

• 操作克隆节点内部元素：通过clone.querySelector()定位克隆节点内的元素，确保每个职位卡片的内容独立正确。
• 自定义属性存ID：给按钮添加data-job-id属性存储对应职位ID，点击时直接读取，彻底规避闭包陷阱。
• 移除重复ID：克隆后删除模板和按钮的ID，符合HTML规范，避免后续选择器出错。
• 简化逻辑：去掉冗余的数组存储和sessionStorage操作，直接使用循环中的jobData对象，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Moatasem B.Hussien