Question

我有这个模板：

<template id="a">
   <div class="b">
        <h1 class="placeholder1"></h1>
        <div class="info hide">
            <p class="p1"></p>
        </div>
    </div>

我正在克隆它：

fetch("json/countries.json").then(res => res.json()).then(list => show(list));
function show(list) {
    list.forEach(function (list) {
        const clone = template.cloneNode(true);
        clone.querySelector(".placeholder1").textContent = list.country;
})}

我正在尝试为每个克隆对象添加一个事件监听器，但结果是它只将它添加到第一个克隆元素，而不是其余元素。

clone.querySelector(".placeholder1").addEventListener('click', fx_button1);
function fx_button1(){
    document.querySelector(".info").classList.toggle("hide");
}

Answer 1

querySelector ^MDN仅选择从给定选择器中找到的第一个匹配项。您需要使用querySelectorAll ^MDN，然后迭代结果。

var cloneSet = clone.querySelectorAll(".placeholder1");
for(var i = 0; i < cloneSet.length; i++){
    cloneSet[i].addEventListener('click', fx_button1);
}

如何向所有克隆元素添加eventlistener？

1 个答案: