私はこのテンプレートを持っています：
<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");
}
querySelector MDNは、指定されたセレクターから見つかった最初の一致のみを選択します。querySelectorAll MDNを使用して、結果を繰り返す必要があります。
var cloneSet = clone.querySelectorAll(".placeholder1");
for(var i = 0; i < cloneSet.length; i++){
cloneSet[i].addEventListener('click', fx_button1);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加