切换类名 onclick JavaScript答案

【问题标题】：Toggle classname onclick JavaScript切换类名 onclick JavaScript
【发布时间】：2017-02-01 00:47:32
【问题描述】：

我快到了，只是有点不确定我的代码设置，我基本上想在点击时删除一个类，然后在点击时再次添加它，然后删除 onclick，然后添加 onclick。等等！这就是我所拥有的，它几乎就在那里，但如果有更好的方法来做到这一点，那么请帮忙！谢谢。

document.getElementById('myButton').onclick = function() {
    myButton.className = myButton.className.replace(/(?:^|\s)active(?!\S)/g, '') ? 'active': jbar.className.replace(/(?:^|\s)active(?!\S)/g, '') ;
}

非常感谢任何帮助！

【问题讨论】：

标签： javascript toggle

【解决方案1】：

我真的很惊讶这里没有人提到classList。所以只是为了完整：替代解决方案是使用 classList 方法 toggle()。

那么你的情况就是：

document.getElementById('myButton').onclick = function() {
    this.classList.toggle('active');
}

e.classList.toggle() 有很好的支持（除了，ehm，IE，它从 IE10 开始就在那里）。 Click here 以获得完整的浏览器兼容性。

【讨论】：

为什么没有标记为正确答案？比其他答案更短更干净。
2021年，这绝对是正确答案。大家请用classList.toggle(...)！

【解决方案2】：

如果要使用三元运算符，请使用：

document.getElementById('myButton').onclick = function() {

    var className = ' ' + myButton.className + ' ';

    this.className = ~className.indexOf(' active ') ?
                         className.replace(' active ', ' ') :
                         this.className + ' active';
}

为了清楚起见，我会使用常规的 if/else：

document.getElementById('myButton').onclick = function() {

    var className = ' ' + myButton.className + ' ';

    if ( ~className.indexOf(' active ') ) {
        this.className = className.replace(' active ', ' ');
    } else {
        this.className += ' active';
    }              
}

这是小提琴：http://jsfiddle.net/ttEGY/

【讨论】：

太棒了！非常感谢。为什么你不需要 RegEx？
@Toddo - 因为我将它包装在空格中，所以我可以搜索精确的字符串匹配。我从 jQuery 源代码中学到的老技巧。
聪明，比 RegEx 干净得多。我可以麻烦您多提一条建议吗？如果我想一次从两个不同的 div 中删除该类？不写两次怎么办。假设 id 是 #myButton1 和 #myButton2 都包含要切换的类。
@Toddo - 你不能。您应该将此功能抽象为一个函数，并分别为这两个元素调用它。
你将如何在每个项目上运行该函数？还是您的意思是为每个人设置一个 onclick？

【解决方案3】：

如果 JQuery 适合你，它真的很简单

$(myButton).toggleClass('active')

http://jsfiddle.net/bikeshedder/eRJB4/

【讨论】：

谢谢，但 jQuery 不是我想要使用的。反正干杯:)

【解决方案4】：

建议toggleClass方法的常用实现：

function toggleClass(element, tClass) {
    tClass = tClass.replace(/\s/g, "");

    var classes =  element.className;
    element.className = classes.indexOf(tClass) !== -1 
        ? classes.replace(" " + tClass, "")
        : classes + " " + tClass;
}

使用：

var element = document.getElementById('myId');
toggleClass(element, 'active');

【讨论】：

【解决方案5】：

使用数组方法实现：

const toggleClass = (element, className) => {
  let classNames = element.className.split(' ');
  let index = classNames.indexOf(className);
  if (index === -1) {
    classNames.push(className);
  } else {
    classNames.splice(index, 1);
  }
  element.className = classNames.filter(item => item !== '').join(' ');
}

用法：

let body = document.getElementsByTagName('body')[0];
toggleClass(body, 'ready');

Plunker

【讨论】：