Question

我被告知我不能再在我正在构建的项目中使用jQuery，所以我不得不使用vanilla Javascript，这有时候会让我头疼。我希望简单地将这个jQuery转换为js。我在Stack Overflow上搜索和搜索无济于事，但我觉得它不应该那么困难。任何帮助都会很棒！

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

Answer 1

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

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

＆＃13;

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');
  }
});

＆＃13;

.current {
  color: #f00;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

DOM API不会在jQuery对象上调用addClass / removeClass，而是公开名为className的元素的属性。这与元素上的class属性相同：

this.className =＆＃39; current＆＃39;;

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

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

2 个答案: