您好，我当前的工作代码如下：
// individual page elements toggle up and down
const drone = document.querySelector(".innerContent1"),
fighter = document.querySelector(".innerContent2"),
carrier = document.querySelector(".innerContent3"),
iconImg1 = document.querySelector(".toggleImg1"),
iconImg2 = document.querySelector(".toggleImg2"),
iconImg3 = document.querySelector(".toggleImg3");
// drone toggle on and off
document.getElementById("iconD").addEventListener("click", () => {
if(drone.classList.contains("innerContent1")) {
drone.classList.add("hide");
drone.classList.remove("innerContent1");
iconImg1.src = "img/downIcon.png";
} else {
drone.classList.add("innerContent1");
drone.classList.remove("hide");
iconImg1.src = "img/upIcon.png";
}
});
// fighter jet toggle on and off
document.getElementById("iconFJ").addEventListener("click", () => {
if(fighter.classList.contains("innerContent2")) {
fighter.classList.add("hide");
fighter.classList.remove("innerContent2");
iconImg2.src = "img/downIcon.png";
} else {
fighter.classList.add("innerContent2");
fighter.classList.remove("hide");
iconImg2.src = "img/upIcon.png";
}
});
// carrier plane toggle on and off
document.getElementById("iconCP").addEventListener("click", () => {
if(carrier.classList.contains("innerContent3")) {
carrier.classList.add("hide");
carrier.classList.remove("innerContent3");
iconImg3.src = "img/downIcon.png";
} else {
carrier.classList.add("innerContent3");
carrier.classList.remove("hide");
iconImg3.src = "img/upIcon.png";
}
});
// working code leave alone
该代码可正常运行，但正如您所知，它并非完全干燥。因此尝试2号，但我无法上班。
//select all of the innerContent on the page [0,1,2] 3 of them
const planeType = document.querySelectorAll(".innerContent")
// //select all of the toggle Images on the page [0,1,2] 3 of them
const imgList = document.querySelectorAll(".toggleImg");
//when clicking on each button i just want it to collapse the corresponding innerContent not all of them.
planeType.forEach(function(button) {
addEventListener("click", () => {
if(button.classList.contains("innerContent")){
//if selector 1 2 or 3 has innerContent
button.classList.add("hide");
//only want to hide the corresponding div when clicking on the corresponding toggleImg
button.classList.remove("innerContent");
//only remove the innerContent of the specific item not all of them
imgList.src = "img/downIcon.png";
//change the img of the corresponding toggleImg
} else {
//if the div has a class of hide then replace with innerContent
button.classList.remove("hide");
//only replace the corresponding one to the button being clicked
button.classList.add("innerContent");
//change the image back to orgional state only once specified one clicked
imgList.src = "img/upIcon.png" ;
}
})
})
您可以看到Im一直存在问题，因为我将所有类都命名为相同的东西，并将它们放在列表中，因为如果我单击仅隐藏所有内容的一件事。预先感谢。
const buildUI = (btns, id) => {
const cl = "innerContent" + id;
const tg = "toggleImg" + id;
const elm = document.querySelector(cl);
const img = document.querySelector(tg);
btns.addEventListener("click", () => {
if (elm.classList.contains(cl)) {
elm.classList.add("hide");
elm.classList.remove(cl);
img.src = "img/downIcon.png";
} else {
elm.classList.add(cl);
elm.classList.remove("hide");
img.src = "img/upIcon.png";
}
});
};
const btns = [
document.getElementById("iconD"),
document.getElementById("iconFJ"),
document.getElementById("iconCP"),
];
btns.forEach((btn, index) => {
buildUI(btn, index);
});
//select all of the innerContent on the page [0,1,2] 3 of them
const planeType = document.querySelectorAll(".innerContent")
// //select all of the toggle Images on the page [0,1,2] 3 of them
const imgList = document.querySelectorAll(".toggleImg");
//when clicking on each button i just want it to collapse the corresponding innerContent not all of them.
planeType.forEach(function(button, i) {
addEventListener("click", () => {
if(button.classList.contains("innerContent")){
//if selector 1 2 or 3 has innerContent
button.classList.add("hide");
//only want to hide the corresponding div when clicking on the corresponding toggleImg
button.classList.remove("innerContent");
//only remove the innerContent of the specific item not all of them
imgList[i].src = "img/downIcon.png"; // updated
//change the img of the corresponding toggleImg
} else {
//if the div has a class of hide then replace with innerContent
button.classList.remove("hide");
//only replace the corresponding one to the button being clicked
button.classList.add("innerContent");
//change the image back to orgional state only once specified one clicked
imgList[i].src = "img/upIcon.png" ; // updated
}
})
})
所以区别在于它在forE中使用两个参数，第二个是数组中的索引，并且您使用imgList[i]获取其他nodeList中的元素（数组类似于来自querySelectrAll的对象）在以下示例代码中，我将“ click”事件链接到外部容器，并利用了一个事实，即在内部单击的所有内容都将触发绑定函数。每次点击后，我必须检查目标是否确实是“按钮”（即具有“ innerCOntent”类），然后可以继续展开操作。在我的代码中，我没有删除“ innerContent”类，因为该类用于将div标识为“可单击的按钮”。如果删除了它，则事件功能在单击一次后将不再处理此按钮。
document.querySelector(".outer").addEventListener("click", (ev) => {
var tcl=ev.target.classList;
if(tcl.contains("innerContent")){
tcl.toggle("hide");
ev.target.querySelector('img').src =
"img/"+(tcl.contains("hide")?'down':'up')+"Icon.png";
}
}).innerContent {border: 1px solid gray; background-color: #ddd; width: 200px; padding: 6px;margin:10px}
.hide {color: #888}<div class="outer">
<div class="innerContent">drone<img src="upIcon.png"></div>
<div class="innerContent">fighter<img src="upIcon.png"></div>
<div class="innerContent">carrier<img src="upIcon.png"></div>
<div class="innerContent">passenger<img src="upIcon.png"></div>
</div>