Vanilla Javascript - 将类添加到元素 1，并在单击元素 1 时从元素 2 中删除类

Question

我被告知我不能再在我正在构建的项目中使用 jQuery，所以我被迫使用普通的 Javascript，这有时会超出我的能力范围。我希望简单地将这个 jQuery 转换为 js。我在 Stack Overflow 上找了又找，没有结果，但我觉得应该没那么难。任何帮助都会很棒！

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

Answer 1

您可以将click事件侦听器附加到该.navbuttoncontainer元素。

然后a通过检查目标元素的标签名（e.target）来判断该元素是否被点击。在元素的属性上使用.add()/.remove()方法来添加/删除类。classList

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>