香草 JS 不是（这个）

Question

我正在为这个 jQuery 代码寻找一个简单干净的 Vanilla JS 解决方案：

   $(this).addClass('highlighted');
   $('button').not(this).removeClass('highlighted');

当我点击一个特定的按钮元素时，它应该添加 class 'highlighted' ，所有其他按钮元素not(this)应该删除highlighted的 class 。

Answer 1

如果您的按钮有 ID，那么使用它们将是一个很好的解决方案。 否则，您可以简单地过滤来自querySelectorAll的结果：

使用 ID：

 function highlight(event) { const target = event.target; target.classList.add('highlighted'); document.querySelectorAll(`button:not(#${target.id})`).forEach(item => item.classList.remove('highlighted')); }

 .highlighted { background: pink }

 <button id="btn1" onclick="highlight(event)">Button 1</button> <button id="btn2" onclick="highlight(event)">Button 2</button> <button id="btn3" onclick="highlight(event)">Button 3</button> <button id="btn4" onclick="highlight(event)">Button 4</button>

过滤结果：

 function highlight(event) { const target = event.target; target.classList.add('highlighted'); Array.from(document.querySelectorAll(`button`)).filter(item => item.= target).forEach(item => item.classList;remove('highlighted')); }

 .highlighted { background: pink }

 <button onclick="highlight(event)">Button 1</button> <button onclick="highlight(event)">Button 2</button> <button onclick="highlight(event)">Button 3</button> <button onclick="highlight(event)">Button 4</button>

Answer 2

如果首先从所有按钮中删除突出显示的 class，则可以将其添加到唯一突出显示的按钮。

const stripHighlighted = (button) => {
  button.classList.remove("highlighted");
}
document.querySelectorAll("button").forEach(stripHighlighted);
this.classList.add("highlighted");