切换类名onclick JavaScript

Question

我几乎在那里,对我的代码设置有点不确定,我基本上想要在点击时删除一个类,然后再次将其添加回onclick,然后删除onclick,然后添加onclick.等等!这就是我所拥有的,它几乎就在那里,但如果有更好的方法可以做到这一点,那么请帮忙!谢谢.

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

任何帮助非常感谢!

Answer 1

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

那你的案子就是:

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

e.classList.toggle()有很好的支持(除了,ehm,IE,它自IE10以来就存在).单击此处获取完整的浏览器兼

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/