如何让事件侦听器一次只在一个项目上添加 CSS 元素（香草 JavaScript）

Question

^我希望一次只能启用一个样式。

^我可以做到这一点，但我不希望用户能够做到。

因此，很难提出一个可能很简单的解决方案的问题。我基本上有一个构建版本列表，我希望用户在其中 select 一个。当其中一个版本被 selected 时，它会向项目添加边框以显示其已被单击。但是，现在使用我的代码，用户可以 select 所有 3 个项目并启用它们的 CSS 元素。我希望用户只能“激活”列表中的一项。

HTML 和 CSS:

<ul class="listContents">
      
         <li><p><a href="#" class="links">Stable</a></p></li>
        <li><p><a href="#" class="links">Preview</a></p></li>
        <li><p><a href="#" class="links">LTS</a></p></li>
</ul>

<style>
.colorText {
        background-color: #58a7ed;
        color: white;
}
</style>

和 JS 的东西：

const btn = document.querySelectorAll('.links');

for (let i = 0; i < btn.length; i++ ) {
    btn[i].addEventListener("click", function() {
        btn[i].classList.add('colorText')
    })
}

我真的希望我说清楚了，我觉得我的英语不及格，试图用正确的措辞来表达这个意思哈哈。

Answer 1

就在您将 colorText class 添加到所需项目之前，我们可以从所有项目中删除 colorText，确保一次只有 1 个获得 class.

// the rest is the same...
btn[i].addEventListener("click", function() {
  // remove it from all:
  btn.forEach(function(item) {
    item.classList.remove('colorText');
  });
  // add it back to the desired one
  btn[i].classList.add('colorText')
})

Answer 2

您还可以使用 forEach 循环，使用 event.target

访问点击的 link

const btns = document.querySelectorAll('.links');

btns.forEach(btn => {
  btn.addEventListener('click', e => {
    // remove any existing active links
    btns.forEach(b => b.classList.remove('colorText'));
    // activate the clicked link
    e.target.classList.add('colorText');
  })
});

.colorText {
  background-color: #58a7ed;
  color: white;
}

<ul class="listContents">
  <li>
    <p><a href="#" class="links">Stable</a></p>
  </li>
  <li>
    <p><a href="#" class="links">Preview</a></p>
  </li>
  <li>
    <p><a href="#" class="links">LTS</a></p>
  </li>
</ul>

Answer 3

你也可以使用简单的 for of

const btn = document.querySelectorAll(".links");

for (let bt of btn) {
  bt.addEventListener("click", (e) => {
    btn.forEach((b) => b.classList.remove("colorText"));
    e.target.classList.add("colorText");
  });
}

如何让事件侦听器一次只在一个项目上添加 CSS 元素（香草 JavaScript）

How to make the event listener only add CSS element on one item at a time (vanilla JavaScript)

html

javascript

css

list

queryselector