如何删除（切换）已选择的“活动”班级列表

Posted 2023-05-08

【中文标题】如何删除（切换）已选择的“活动”班级列表

【英文标题】：how to remove(toggle) 'active' classlist that is already selected

【发布时间】：2020-05-30 17:10:34

【问题描述】：

我正在努力从已选择的链接中删除“活动”类。

查看 javascript 中的第 20 行。 classLink.toggle 不应该在 clickedElement 上添加/删除“活动”吗？ 我什至尝试了几种方法，例如

 if (clickedElement.classList.contains('active')) 
  clickedElement.classList.remove('active');
 else 
  clickedElement.classList.add('active');

但似乎没有一个适用于这个特定的类（适用于我添加的任何其他类）。 我错过了什么？

https://jsfiddle.net/Evenclan/09sn2kd3/15/

【问题讨论】：

不清楚你在问什么。在选择另一个链接之前，您是否希望您的 JS Fiddle 标题链接为红色？

因此，您希望文本 Article 2 在单击时变为粗体，而在单击其他内容时变为非粗体

您应该将代码范围缩小到最小的可重现状态，以便清楚您想要什么。查看您的 JS Fiddle，您的代码可以正常工作并应用该类。

toggle 不会“似乎”删除已经粗体元素上的类（=boldness）（如果您重新单击相同的元素），因为您 remove 都在 for loop 中上面的行。所以你删除它然后重新应用它..在这里工作。根据您的代码的工作方式，一旦激活一篇文章，您就不能再“停用”所有文章。

@Evenclan：我在上面告诉过你为什么它不能那样工作。只需阅读我的评论。将 activeLink.classList.remove('active') 更改为 if(clickedElement !==activeLink) activeLink.classList.remove('active') 即可。 jsfiddle.net/8jrwn3sx

【参考方案1】：

只是为了回答实际问题，为什么toggle 不会在您的小提琴中取消.active。 https://jsfiddle.net/Evenclan/09sn2kd3/15/

在切换之前你首先要做的是：

for (let activeLink of activeLinks) 
  activeLink.classList.remove('active');

这会从所有链接元素中删除.active。这意味着所有这些都不再上课或至少没有课.active。

在下一行你 toggle 刚刚删除的类 .active：

clickedElement.classList.toggle('active');

因此类被添加回来（没有的被添加，有的被删除）。

toggle 实际上工作正常，只是你的逻辑不行。要获得所需的结果，您必须从删除类中排除当前单击的元素。

for (let activeLink of activeLinks) 
  if(clickedElement !== activeLink) activeLink.classList.remove('active');


clickedElement.classList.toggle('active');

https://jsfiddle.net/8jrwn3sx/

【讨论】：

感谢您的所有帮助，抱歉我不够清楚。我不明白发生了什么，但由于您的意见，我开始了解发生了什么。

【参考方案2】：

classList 包含一个切换方法。

this.classList.toggle('active');

How to toggle class using pure javascript in html

编辑： 您包含的 JsFiddle 正在工作。我打开控制台并单击不同的链接，它们可以正常切换。

【讨论】：

我做到了。我的建议与使用与否无关，而是列表已经包含切换方法这一事实。

你甚至打开了 JsFiddle 吗？它在那里工作。

他的问题字面意思是“jsfiddle 中的第 20 行” 你会看到这行代码有Element.classList.toggle。您的回答没有任何价值。

只要明白它在 Jsfiddle 上工作。代码没有问题。可能是浏览器。你的 cmets 的价值在哪里？

我同意，这个答案没有任何价值。