单击屏幕上的任意位置时如何停止.className答案

【问题标题】：How to stop .className when click anywhere on the screen单击屏幕上的任意位置时如何停止.className
【发布时间】：2022-06-22 17:42:50
【问题描述】：

我有一个功能可以让一个元素在点击时出现，而让其他元素淡出

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=""？

【问题讨论】：

我不懂你的代码，你的const 是memberB 但你选择了所有memberA，然后你使用memberA 但这个变量不存在，为什么三次相同的代码....？ .
是的，抱歉，这是我的代码模型，只是为了让我的问题更容易。我现在修好了，它应该是 memberA、memberAA 和 memberAAA，我不知道如何从 memberB 中删除 memberB[i] 并保持效果。
示例代码似乎是故意混淆的。 const memberB = document.querySelectorAll('#memberA,#memberAA, #memberAAA ');

标签： javascript

【解决方案1】：

为此使用单个类以获得更通用的选择器，我使用此 sn-p 来为此使用单个事件侦听器。

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

【讨论】：

【解决方案2】：

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";
    }
}

【讨论】：

【解决方案3】：

你可以试试这个：

memberB[i].className = memberB[i].className.replace("open", "");

【讨论】：