10

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

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

非常感谢任何帮助!

4

5 回答 5

64

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

那么你的情况就是:

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

e.classList.toggle() 有很好的支持(除了,嗯,IE,它从 IE10 开始就在那里)。单击此处了解完整的浏览器兼容性。

于 2015-12-29T16:17:35.503 回答
16

如果要使用三元运算符,请使用:

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/

于 2013-01-30T23:24:19.273 回答
3

如果 JQuery 对你来说没问题,它真的很简单

$(myButton).toggleClass('active')

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

于 2013-01-30T23:24:53.760 回答
0

建议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');
于 2015-09-04T16:41:44.677 回答
0

使用数组方法实现:

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

普朗克

于 2017-01-31T16:47:32.427 回答