如何根据ID动态修改Bootstrap手风琴的data-target属性

这个问题的核心很明确：你在循环里给所有手风琴面板和对应的触发按钮都用了相同的ID和data-target值（都是collapseOne），而HTML规范里ID必须是唯一的，所以点击任何按钮时，浏览器会找到所有匹配这个ID的元素并触发折叠/展开，导致所有面板一起动。

要解决这个问题，只需要在循环过程中为每个手风琴生成唯一的标识，把这个标识绑定到按钮的data-target和面板的id上就行。这里我们可以利用循环的索引i（或者你数据里的唯一字段比如jobid）来生成唯一值。

修改后的代码示例： #

// 补充完整循环结构，方便你直接复用
for(let i = 0; i < p.length; i++){
  // 生成唯一标识，用循环索引i保证唯一性，也可以替换成p[i].jobid（如果jobid是唯一值）
  const collapseId = `collapse-${i}`;
  const headingId = `heading-${i}`;
  const cardId = `card-${i}`;

  $("#accordion").append(`<div class="card w-100" id="${cardId}">
    <div class="card-header" id="${headingId}">
      <h5 class="mb-0">
        <button class="btn btn-link p-0 text-left" data-toggle="collapse" 
                data-target="#${collapseId}" aria-expanded="false" 
                aria-controls="${collapseId}">
          ${p[i]["jobtitle"]}
        </button> 
      </h5>
    </div>
    <div id="${collapseId}" class="collapse" aria-labelledby="${headingId}" data-parent="#accordion">
      <div class="card-body">
        <p class="card-text mb-0">Status</p>${p[i]["status"]}
        <p class="card-text mb-0 mt-2">Job Id</p>${p[i]["jobid"]}
        <p class="card-text mb-0 mt-2">Noc Code</p>${p[i]["noc_code"]}
        <p class="card-text mb-0 mt-2">Job title</p>${p[i]["jobtitle"]}
        <p class="card-text mb-0 mt-2">Location</p>${p[i]["joblocation"]}
        <p class="card-text mb-0 mt-2">Business Name</p>${p[i]["jobcompany"]}
        <p class="card-text mb-0 mt-2">Matches and report</p><p class="mb-0">12</p>
        <p class="card-text mb-0 mt-2">Posting start date</p>${p[i]["jobstartdate"]}
        <p class="card-text mb-0 mt-2">End date</p>${p[i]["enddate"]}
        <p class="card-text mb-0 mt-2">Operating name</p>
      </div>
    </div>
  </div>`);
}

关键修改点： #

• 用collapse-${i}生成唯一的折叠面板ID，同时把按钮的data-target和aria-controls都指向这个唯一ID，确保按钮只对应自己的面板
• 把卡片的id和标题的id也改成唯一值（card-${i}、heading-${i}），严格遵守HTML中ID必须唯一的规范，避免潜在的其他DOM问题
• 改用ES6模板字符串（反引号`）代替单引号，不需要转义<>符号，代码可读性更高

这样修改后，每个按钮只会触发对应ID的面板，就不会出现点击一个全部展开的情况了。

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