我有一个函数,它使元素列表中的元素在单击时更改其.className,因此,当我单击该元素时,该元素变为一种颜色,而另一种颜色则变为另一种颜色。这一职能如下:
const memberB = document.querySelectorAll('#memberBoxAlex,
#memberBoxLiv, #memberBoxFlo');
for (let i = 0; i < memberB.length; i++)
memberB[i].onclick = function(){
memberBoxAlex.className = "faded";
memberBoxLiv.className = "faded";
memberBoxFlo.className = "faded";
if(memberB[i].className=="open"){
memberB[i].className="";
}
else{
memberB[i].className="open";
}
这是完美的,但是接下来我想要发生的是,当我点击它的框外停止所有的效果,从而使所有的memberB“正常”,比方说,有.className=""
。我试着给他们的容器这个函数:
let exitEffect = document.getElementById(team)
exitEffect.onclick = function(){
memberBoxAlex.className = "";
memberBoxLiv.className = "";
memberBoxFlo.className = "";}
当我单击成员的框外时,className for memberB
将“停止”或成为.className=""
,我如何做到这一点?
发布于 2022-06-22 01:15:11
对于一个更通用的选择器,可以使用一个单独的类,而我则使用这个片段来使用单个事件侦听器。
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');
});
发布于 2022-06-22 01:09:14
文档方法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";
}
}
发布于 2022-06-22 01:42:50
你可以试试这个:
memberB[i].className = memberB[i].className.replace("open", "");
https://stackoverflow.com/questions/72712350
复制相似问题