给定一个元素列表，如何在单击的元素上设置一个活动类？如何确保一个元素一次始终处于活动状态？

Question

我有一组按钮，希望在单击按钮时能够切换一个活动类。

我还希望一次只使用一个按钮，也就是一个按钮。

<section id="color-palette">
        <button class="color selected">Black</button>
        <button class="color">Generate</button>
        <button class="color">Generate</button>
        <button class="color">Generate</button>
    </section>

function selectedColor(){ buttonOne.classList.toggle('selected');
}    

buttonOne.addEventListener('click', selectedColor);

Answer 1

问题1

如果您只想切换每个按钮：

const buttons = Object.values(document.getElementsByClassName("color"));

function selectedColor(e) {
  e.target.classList.toggle("selected");
  console.log(e.target.classList)
}

buttons.forEach(function(button) {
  button.addEventListener("click", selectedColor);
});

问题2

对于第二个问题，如果您希望确保始终在任何给定时间为活动类分配一个按钮：

const buttons = Object.values(document.getElementsByClassName("color"));

function selectedColor(e) {
  buttons.forEach(function (button) {
    if (button === e.target) {
      if (!button.classList.contains("selected")) {
        // only add active class if the current button does not have it
        button.classList.add("selected");
      }
    } else {
      button.classList.remove("selected");
    }
  });
  console.log(buttons);
}

buttons.forEach(function (button) {
  button.addEventListener("click", selectedColor);
});

https://codesandbox.io/s/toggle-button-class-one-selected-always-1bhw87

解释

从DOM获取按钮元素将返回一个HTMLCollection。Object.values()是一种快速获取生成的HTML元素数组的方法，这样我们就可以遍历并锁定每个元素。

首先，我们循环遍历每个元素并添加事件侦听器。

buttons.forEach(function(button) {
  button.addEventListener("click", selectedColor);
});

对于问题1，在事件处理程序中，我们只需切换类。

对于问题2，在事件处理程序中，我们需要再次针对所有按钮来获得每个按钮当前类的帐户。所以，我们在按钮元素上循环。

在我们的循环中，当处理当前按钮时，我们首先添加一个条件来处理与其他按钮不同的单击按钮。

if (button === e.target) {

如果事件目标(我们单击的元素)是当前按钮，我们希望确保该按钮具有活动类。我们可以通过检查活动类是否已经添加来做到这一点。如果没有，我们再加进去。

if (button === e.target) {
  if (!button.classList.contains("selected")) {
    // only add active class if the current button does not have it
    button.classList.add("selected");
  }

最后，如果当前按钮不是单击按钮，则需要确保活动类被删除。

if (button === e.target) {
  if (!button.classList.contains("selected")) {
    // only add active class if the current button does not have it
    button.classList.add("selected");
  }
} else {
  button.classList.remove("selected");
}

这确保一次只有一个按钮具有活动类。