如何从id列表中单击一个id ?

Question

我有一个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";
}
}

我做错了什么，我试着提醒看看我是否得到了我点击的元素，我得到的都是'undefined'。

Answer 1

您可以使用forEach来循环使用querySelectorAll方法的NodeList，并使用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>

Answer 2

我想保留一段代码片段，以便在单个事件侦听器中完成这些事情

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');
});

Answer 3

脚本在加载DOM元素之前运行。

您可以将脚本作为函数放在$(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>

让我知道这是否有效!