点击切换JavaScript中的类名

Question

我快完成了，只是对我的代码设置有些不确定。我想在点击时删除一个类，再次点击时将其添加回来，然后删除 onclick，再添加 onclick。就这样！这是我所拥有的，它已经接近完美，但如果有更好的方法，请帮助一下！谢谢。

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

非常感谢任何帮助！

- user1323595

Answer 1

我真的很惊讶，没有人在这里提到classList。为了完整起见，另一种解决方案是使用classList方法toggle()。

那么你的情况就简单了：

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

e.classList.toggle()的支持度很好（除了IE，呃，它自IE10开始就有了）。点击这里获取完整的浏览器兼容性。

- kecer

---

为什么这个没有标记为正确答案？比其他答案更短、更简洁。 - AndrewL64

在2021年，这绝对是正确的答案。大家请使用 classList.toggle(…)！ - Robert Lin

Answer 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/

- Joseph Silber

---

太棒了！非常感谢。你为什么不需要正则表达式呢？ - user1323595

聪明，比正则表达式要干净得多。我能麻烦您再给一个额外的建议吗？如果我想同时从两个不同的 div 中删除类，应该如何做到不写两次？假设 id 是 #myButton1 和 #myButton2，都包含要切换的类。 - user1323595

你是指如何在每个项目上运行该函数吗？还是说你要为它们中的每一个设置一个onclick事件？ - user1323595

类似这样的代码？document.getElementById('myButton').onclick = toggleClass(myButton); 上面那个函数可以像这样使用：function toggleClass(element) {...} - user1323595

@Toddo - 是的。别忘了将 this.className 替换为 myButton.className。 - Joseph Silber

Answer 3

如果您使用jQuery，那么它真的很简单，只需：

$(myButton).toggleClass('active')

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

- bikeshedder

---

谢谢，但jQuery不是我想要使用的。无论如何，祝好 :) - user1323595

Answer 4

使用数组方法的实现：

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

- Steve Brush

Answer 5

建议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');

- BotanMan