如何为动态生成HTML中的data-toggle与data-target添加编号以实现独立模态框触发？

我拥有经过映射的JSON数据，需要在容器中展示渲染结果。要求生成的HTML中的每个列表项都能打开一个独立的模态窗口。为此，我需要为生成代码中的每个data-toggle="modal"和data-target="exampleModal"关联一个唯一编号。我尝试添加data-modal="modal${res[i]}"，但这种方式无法生成有效的编号。当前生成代码如下：

const res = some.d.results; //arr of objects
let ul = document.querySelector('#test');
const html = res.map(el=> {
  for (i = 1; i < res.length; i++) {
    return `<li class="box-top box-top--feat" type="button" data-toggle="modal${res[i]}" data-target="exampleModal${res[i]}">
 <a class="box-top__content" href="#">
 <div class="box-top__title__img2">
 <img class="availableImgs" alt="" src="${res.dirRef}${'/'}${res.fileRef}" />
 </div>
 <h2 class="box-top__title">${res.PersonA.Person}</h2>
 <h3 class="box-top__work">${res.Title}</h3>
 </a>
 </li>
 <div class="modal fade" id="exampleModal${res[i]}" tabindex="-1">
 <div class="modal-dialog modal-dialog-centered">
 <div class="modal-content">
 <div class="modal-body">
 <p>${res.DescA.PersA]}</p>
 </div>
 </div>
 </div>
 </div>`;
  }
}).join("");

你的代码里存在几个关键问题，导致无法生成有效的唯一编号：

1. map函数内部不需要额外的for循环，map本身会遍历数组的每一个元素，额外的循环会打乱遍历逻辑；
2. 你错误地引用了res[i]，在map的回调里，当前元素是el，而不是res[i]，而且map可以获取到当前元素的索引，这是生成唯一编号的最佳方式；
3. data-toggle的值应该始终是modal，这是Bootstrap模态框的固定触发标识，不需要加编号，编号只需要加在data-target和模态框的id上。

下面是修正后的代码：

const res = some.d.results; // arr of objects
const ul = document.querySelector('#test');

// 使用map的第二个参数index来获取当前元素的索引，作为唯一编号
const html = res.map((el, index) => {
  // 生成唯一的模态框ID
  const modalId = `exampleModal-${index}`;
  return `
<li class="box-top box-top--feat" type="button" data-toggle="modal" data-target="#${modalId}">
  <a class="box-top__content" href="#">
    <div class="box-top__title__img2">
      <img class="availableImgs" alt="" src="${el.dirRef}/${el.fileRef}" />
    </div>
    <h2 class="box-top__title">${el.PersonA.Person}</h2>
    <h3 class="box-top__work">${el.Title}</h3>
  </a>
</li>
<div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}-label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <p>${el.DescA.PersA}</p>
      </div>
    </div>
  </div>
</div>
`;
}).join("");

// 最后把生成的HTML插入到容器中
ul.innerHTML = html;

关键改进点说明： #

• 使用map的索引参数：map((el, index) => {})中的index是当前元素在数组中的位置，从0开始，是天然的唯一编号；
• 修正数据引用：所有的属性都应该从当前遍历的el对象中获取，而不是res数组，比如el.dirRef、el.PersonA.Person，这样才能正确对应每个元素的数据；
• 正确设置data-toggle和data-target：data-toggle固定为modal，data-target需要以#开头指向模态框的ID，比如#exampleModal-0；
• 添加无障碍属性：额外增加了aria-labelledby和aria-hidden属性，提升模态框的可访问性。

如果你的数据对象本身有唯一的ID字段（比如el.id），用这个字段来生成模态框ID会比索引更可靠，比如：

const modalId = `exampleModal-${el.id}`;

这样即使数组顺序变化，模态框的关联关系也不会出错。

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