切换类名 onclick JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14615712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle classname onclick JavaScript
提问by Joseph Silber
I am nearly there, just a little unsure as to my code setup, I basically want to remove a class on click, and add it back again onclick, then remove onclick, then add onclick. And so on! Here's what I have, it's nearly there, but if there is a nicer way to do this then please help! Thank you.
我快到了，只是对我的代码设置有点不确定，我基本上想在点击时删除一个类，然后在点击时再次添加它，然后删除点击，然后添加点击。等等！这就是我所拥有的，它几乎就在那里，但是如果有更好的方法来做到这一点，请帮忙！谢谢你。
document.getElementById('myButton').onclick = function() {
myButton.className = myButton.className.replace(/(?:^|\s)active(?!\S)/g, '') ? 'active': jbar.className.replace(/(?:^|\s)active(?!\S)/g, '') ;
}
Any help much appreciated!
非常感谢任何帮助！
回答by kecer
I am reallysurprised nobody mentioned classListhere. So just to be complete: Alternative solution would be to use classList method toggle().
我真的很惊讶这里没有人提到classList。所以只是为了完成：替代解决方案是使用 classList 方法toggle()。
Your case would then simply be:
那么你的情况就是：
document.getElementById('myButton').onclick = function() {
this.classList.toggle('active');
}
e.classList.toggle() has good support (except for, ehm, IE, It's there since IE10). Click herefor complete browser compatibility.
e.classList.toggle() 有很好的支持（除了 ehm，IE，它从 IE10 开始就存在）。单击此处了解完整的浏览器兼容性。
回答by Joseph Silber
If you want to use a ternary operator, use this:
如果要使用三元运算符，请使用以下命令：
document.getElementById('myButton').onclick = function() {
var className = ' ' + myButton.className + ' ';
this.className = ~className.indexOf(' active ') ?
className.replace(' active ', ' ') :
this.className + ' active';
}
For clarity, I'd use a regular if/else:
为清楚起见，我将使用常规的 if/else：
document.getElementById('myButton').onclick = function() {
var className = ' ' + myButton.className + ' ';
if ( ~className.indexOf(' active ') ) {
this.className = className.replace(' active ', ' ');
} else {
this.className += ' active';
}
}
Here's the fiddle: http://jsfiddle.net/ttEGY/
这是小提琴：http: //jsfiddle.net/ttEGY/
回答by bikeshedder
If JQuery is okay for you it really is as simple as
如果 JQuery 适合你，它真的很简单
$(myButton).toggleClass('active')
回答by BotanMan
Suggest common realization of toggleClass method:
建议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;
}
using:
使用：
var element = document.getElementById('myId');
toggleClass(element, 'active');
回答by Steve Brush
Implementation using Array methods:
使用数组方法实现：
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(' ');
}
Usage:
用法：
let body = document.getElementsByTagName('body')[0];
toggleClass(body, 'ready');
