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

Posted 2023-03-05

【中文标题】Vanilla Javascript - 向元素 1 添加类并在单击元素 1 时从元素 2 中删除类

【英文标题】：Vanilla Javascript - Adding class to element 1 and remove class from element 2 on click of element 1

【发布时间】：2016-03-16 07:09:02

【问题描述】：

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

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

【问题讨论】：

您已经搜索并搜索过？这个问题是另一个问题的重复，有 21 个答案呢？ ***.com/questions/2155737/…

你的相关内容是什么，“minimal reproducible example”html？

您有什么问题，附加事件处理程序，通过选择器获取元素或添加和删除 css 类？

有关 jQuery 功能及其 vanilla DOM 等价物的更多示例，请参阅youmightnotneedjquery.com

【参考方案1】：

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

然后通过检查目标元素的标签名（e.target）来判断a元素是否被点击。对元素的classList property 使用.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>

【参考方案2】：

所有现代浏览器都支持document.querySelector/document.querySelectorAll，这与jQuery $ 函数本质上是一样的。

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

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

this.className = '当前';

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