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

Question

我有一个函数可以使元素列表中的元素在单击时更改其 .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 = "";}

当我在成员框外单击时，如何执行此操作for memberB的所有 className 将“停止”或变为.className="" 。

Answer 1

为此使用单个类以获得更通用的选择器，我使用此代码段为此使用单个事件侦听器。

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

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

Answer 3

你可以试试这个：

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