纯粹的JavaScript - 点击元素1时添加类，并从元素2中删除类

Question

我被告知在我正在构建的项目中不能再使用jQuery，所以我被迫使用原生JavaScript，有时可能会超出我的能力范围。我希望能够简单地将这个jQuery转换为js。我已经在Stack Overflow上搜索了很久，但没有找到答案，但我觉得这不应该很难。任何帮助都将是惊人的！

$('.navbuttoncontainer a').on( 'click', function() {
$('.navbuttoncontainer .current').removeClass('current');
$(this).addClass('current');

- SukieA

---

你已经搜索了很久吗？那这个问题怎么样，它是另一个问题的重复，有21个答案。https://dev59.com/TXI95IYBdhLWcg3wyBGc - Djave

你的相关HTML代码是什么，"[MCVE]"？ - David Thomas

你遇到了什么问题？是添加事件处理程序、通过选择器获取元素还是添加和删除CSS类？ - bug-a-lot

有关jQuery功能及其原生DOM等效性的更多示例，请参见http://youmightnotneedjquery.com/。 - Joe Attardi

Answer 1

你可以将click事件监听器附加到.navbuttoncontainer元素上。

然后，通过检查目标元素(e.target)的标签名称来确定是否单击了a元素。使用元素的classList属性上的.add()/.remove()方法来添加/删除类。

document.querySelector('.navbuttoncontainer').addEventListener('click', function (e) {
  var target = e.target;
  
  if (target.tagName === 'A') {
    e.currentTarget.querySelector('.current').classList.remove('current');
    target.classList.add('current');
  }
});

.current {
  color: #f00;
}

<div class="navbuttoncontainer">
  <a class="current">Initially current item</a>
  <a>Second item</a>
  <a>Third item</a>
</div>

- Josh Crozier

Answer 2

所有现代浏览器都支持document.querySelector/document.querySelectorAll，它们本质上与jQuery $函数相同。

(有关受支持的浏览器信息，请查看http://caniuse.com/#feat=queryselector。

不要在jQuery对象上调用addClass/removeClass，DOM API公开了元素的一个属性，称为className。这与元素上的class属性相同：

this.className = 'current';

最后，事件处理程序使用addEventListener函数注册。参数是事件名称和事件处理程序函数。

- Joe Attardi