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（）。

您的案件就是：

FROM mybase:latest
VOLUME /root/:/var/myVol/
EXPOSE 8080
ADD mydir/test.jar /tmp/test.jar
CMD bash -c 'java -jar /tmp/test.jar > /var/myVol/output.json'

e.classList.toggle（）有很好的支持（除了ehm，IE，它自IE10以来就有）。 Click here以获得完整的浏览器兼容性。

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/

Answer 3

如果JQuery对你没问题，它就像

一样简单

$(myButton).toggleClass('active')

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

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

Answer 5

使用Array方法实现：

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

切换类名onclick JavaScript

5 个答案: