Javascript

Question

以下是我的代码来帮助-

for (var i = 0; i < size; i++) {
     catBoxes.innerHTML += `
     <label>Select ${i+1} Category</label>
     <select id="box-category" class="custom-select" name="">
        ${categories.map((i) => {
            return "<option value='"+i['id']+"'>"+i['name']+"</option>"
        }).join("")};
     </select>         
     `;                                      
 }

上面的代码工作正常，我想在此代码中更改以下内容 -

<select id="box-category"${i} class="custom-select" name="">

但 i 没有在 id 后串联。最终输出应该是

<select id="box-category1" class="custom-select" name="">
<select id="box-category2" class="custom-select" name="">

等等..

非常感谢您的帮助。谢谢。

Answer 1

你应该改变

<select id="box-category"${i} class="custom-select" name="">

至

<select id="box-category${i}" class="custom-select" name="">

Answer 2

打错了，我需要将嵌入的表达式 ${i} 移到引号内。

<select id="box-category"${i} class="custom-select" name="">

<select id="box-category${i}" class="custom-select" name="">

也如@T.J.Crowder所解释不要将 += 与 innerHTML 一起使用。它使浏览器遍历构建 HTML 字符串的元素的内容，将该字符串传递给 JavaScript 代码，从 JavaScript 代码中获取更新后的字符串，销毁内容元素，然后将新字符串解析为新元素。（在此过程中丢失任何元素状态、事件处理程序等。）而是使用 catBoxes.insertAdjacentHTML("beforeend", yourHTML) 来追加。

Javascript - 想要将嵌入的表达式连接到 <div> id

Javascript - Want to concatenate embedded expressions to the <div> id

templates

expression

literals