我有一個 id 串列，當單擊其中一個時，我想給它屬性.className="open。到目前為止，我所做的是將所有 id 放在一個串列中并嘗試遍歷它們。
const memberB = document.querySelectorAll('#memberA, #memberAA, #memberAAA ');
for (var i = 0; i < memberB.length; i ) {
memberB[i].onclick = function(){
alert(memberB[i])
if(memberB[i].className=="open"){
memberB[i].className="";
}
else{
memberB[i].className="open";
}
}
我做錯了什么，我試圖提醒我是否得到了我點擊的元素，我得到的只是'未定義'。
uj5u.com熱心網友回復：
您可以使用forEach回圈NodeListwhich usequerySelectorAll方法，并用于addEventListener觀看您選擇的所有元素上發生的點擊事件。最后，使用Element.classList.toggle方法來切換類的打開或關閉
有一個點擊后切換其背景顏色的例子
const members = document.querySelectorAll('.member');
members.forEach(member => {
member.addEventListener('click', e => {
e.target.classList.toggle('hight-light');
});
});.member {
background-color: gray;
}
.hight-light {
background-color: green;
}<div class="container">
<div class="member">1</div>
<div class="member hight-light">2</div>
<div class="member">3</div>
<div class="member">4</div>
</div>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', '#memberA,#memberAA,#memberAAA', (event) => {
event.target.classList.toggle('open');
});
uj5u.com熱心網友回復：
該腳本在加載 DOM 元素之前運行。
您可以將腳本作為函式放入 an$(document).ready中，以便在加載所有元素后運行。
$(document).ready(
function () {
const memberB = document.querySelectorAll('#memberA, #memberAA, #memberAAA ');
for (let i = 0; i < memberB.length; i ) {
memberB[i].onclick = function () {
//alert(memberB[i])
if (memberB[i].className === "open") {
memberB[i].className = "";
} else {
memberB[i].className = "open";
}
alert(memberB[i].className)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="memberA">A</button>
<button id="memberAA">AA</button>
<button id="memberAAA">AAA</button>讓我知道這個是否奏效！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494250.html
標籤：javascript
上一篇：陣列，我如何同時顯示標題和描述？
下一篇：阿姆斯特朗數