我有一個功能，可以在單擊時使元素出現，并使其他元素褪色
const memberB = document.querySelectorAll('#memberA,#memberAA, #memberAAA ');
for (let i = 0; i < memberB.length; i )
memberB[i].onclick = function(){
memberA.className = "faded";
memberAA.className = "faded";
memberAAA.className = "faded";
if(memberB[i].className=="open"){
memberB[i].className="";
}
else{
memberB[i].className="open";
}
}
單擊任意位置時如何使所有memberB元素成為？.className=""
uj5u.com熱心網友回復：
為此使用單個類以獲得更通用的選擇器，我使用此代碼段為此使用單個事件偵聽器。
window.addEvent = (event_type, target, callback) => {
document.addEventListener(event_type, function (event) {
// If the event doesn't have a target
// Or the target doesn't look like a DOM element (no matches method
// Bail from the listener
if (event.target && typeof (event.target.matches) === 'function') {
if (!event.target.matches(target)) {
// If the element triggering the event is contained in the selector
// Copy the event and trigger it on the right target (keep original in case)
if (event.target.closest(target)) {
const new_event = new CustomEvent(event.type, event);
new_event.data = { originalTarget: event.target };
event.target.closest(target).dispatchEvent(new_event);
}
} else {
callback(event);
}
}
});
};
接著
window.addEvent('click', '.openable-member', (event) => {
document.querySelectorAll('.openable-member').each((element) => {
if (element !== event.target) {
element.classList.add('faded');
element.classList.remove('open'); // guessing you'll need this too
}
});
event.target.classList.toggle('open');
});
uj5u.com熱心網友回復：
Document 方法 querySelectorAll() 回傳一個靜態（非實時）NodeList，表示與指定選擇器組匹配的檔案元素串列。
所以你可以通過 memberB 映射，因為它不是一個陣列。你可以做的是：
const memberB = document.querySelectorAll('#memberA,#memberAA, #memberAAA ');
memberB.onclick = function(){
memberB.className = "faded";
if(memberB.className == "open"){
memberB.className = "";
}
else{
memberB.className = "open";
}
}uj5u.com熱心網友回復：
你可以試試這個：
memberB[i].className = memberB[i].className.replace("open", "");
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/494317.html
標籤：javascript
上一篇：在多維陣列中查找索引
下一篇：僅在第二次點擊時獲取