纯JavaScript：有没有一种方法可以在一个语句中切换多个CSS类？

Question

我使用以下 JavaScript 代码来在我的脚本中改变类：

var toggleDirection = function() {
  group.classList.toggle('left-to-right');
  group.classList.toggle('right-to-left');
}

在我的例子中，只有两个类需要更改，但也可能有多个类需要更改...

因此，有人知道如何以更少的冗余方式编写示例吗？

- cluster1

---

你可以为 Element 创建自己的原型 => https://jsfiddle.net/rayon_1990/2noyz7zf/ - Rayon

是的！可以用逗号分隔或使用展开语法中的数组，答案下面有示例这里。 - Jeff Spicoli

Answer 1

不，直接使用Element.classList API是不可能的。从API中可以看到：

toggle ( String [, force] ) 当只有一个参数时：切换类值；即，如果存在类，则删除它，如果不存在，则添加它。当有第二个参数时：如果第二个参数为true，则添加指定的类值，如果为false，则删除它。

参考链接。

你可能需要编写自己的“实用”功能（使用原生JS），以完成你想要的操作。下面是一个非常简单的演示性示例，它基于classList API工作：

var superToggle = function(element, class0, class1) {
  element.classList.toggle(class0);
  element.classList.toggle(class1);
}

而你可以这样调用它：

superToggle(group,'left-to-right', 'right-to-left');

- GibboK

Answer 2

对于任何想要简短回答的人，您可以在一行中使用ES6/ES2015引入的rest参数来完成此操作：

const toggleCSSclasses = (el, ...cls) => cls.map(cl => el.classList.toggle(cl))

这与@attacomsian的答案非常接近，但利用了剩余参数将返回一个数组的事实——无论传递给函数多少个参数。这意味着我们可以跳过检测我们正在处理字符串还是数组的部分。

const toggleCSSclasses = (el, ...cls) => cls.map(cl => el.classList.toggle(cl));

const one = document.querySelector(".one");

one.addEventListener("click", () => {
  toggleCSSclasses(one, "class1");
});

const two = document.querySelector(".two");

two.addEventListener("click", () => {
  toggleCSSclasses(two, "class1", "class2");
});

.class1 { text-decoration: underline }
.class2 { background: steelblue }

<p class="one">Click to toggle one class</p>
<p class="two">Click to toggle two classes</p>

- agrm

Answer 3

只需使用映射数组。

例如：

['left-to-right', 'right-to-left'].map(v=> group.classList.toggle(v) )

- NIKHIL CHANDRA ROY

Answer 4

以下是ES6版本的解决方案

const classToggle = (el, ...args) => args.map(e => el.classList.toggle(e))

const classToggle = (el, ...args) => {
  args.map(e => el.classList.toggle(e))
}

.a {
  color: red
}

.b {
  background: black
}

.c {
  border-color: yellow
}

<button onclick="classToggle(this,'a', 'c','b')" class="a b c ">Click me</button>

以下是旧版 JavaScript 代码：

var classToggle = function classToggle(el) {
  for (
    var _len = arguments.length,
      args = new Array(_len > 1 ? _len - 1 : 0),
      _key = 1;
    _key < _len;
    _key++
  ) {
    args[_key - 1] = arguments[_key];
  }

  args.map(function (e) {
    return el.classList.toggle(e);
  });
};

- M. Inam

---

这看起来像是最简单的答案，但代码片段并没有显示黄色，只是从白色变成了红色。另外，在同一次点击中切换多个divs/items/button是否可能？ - Transformer

Answer 5

2020年的答案在这里！

从2021年4月份开始，我发现这篇文章很有帮助。

可以使用逗号分隔的类列表，像这样：

const button = document.getElementById('button')

button.classList.add('btn', 'btn-primary', 'btn-primary--footer')
button.classList.remove('btn', 'btn-primary', 'btn-primary--footer')

或者甚至可以从类列表中使用扩展语法：

const button = document.getElementById('button')
const classes = ['btn', 'btn-primary', 'btn-primary--footer']

button.classList.add(...classes)
button.classList.remove(...classes)

- Jeff Spicoli

Answer 6

const toggleClasses = (e, classes) => {
  classes.forEach((className) => {
    e.classList.toggle(className)
  });
}

const classes = [
  'hidden',
  'bg-white',
]

toggleClasses(element, classes)

- MiroPele

---

请阅读如何撰写好的答案？。虽然这个代码块可能回答了OP的问题，但如果您解释一下这段代码与问题中的代码有何不同，您做了哪些更改，为什么要更改以及为什么这样解决问题而不会引入其他问题，那么这个答案将会更加有用。 - Saeed Zhiany

Answer 7

这对我很有帮助。

let superToggle = (element, class0, class1) => {
 element.classList.toggle(class0);
 element.classList.toggle(class1);
};

- user1744669

Answer 8

没有直接的方法，但可以创建一个帮助函数：

const toggleClass =  (el, cls) => {
    if (Array.isArray(cls)) {
        cls.map((cl) => {
            el.classList.toggle(cl);
        });
    } else {
        el.classList.toggle(cls);
    }
};

现在只需要像下面这样调用toggleClass()即可：

// single class
toggleClass(document.querySelector('body'), 'left-to-right');
//multiple classes
toggleClass(document.querySelector('body'), ['left-to-right', 'right-to-left']);

- attacomsian

Answer 9

假设myElement是有效的DOM元素，这样就可以运行：

['right-to-left', 'left-to-right'].forEach(function(className){
  this.classList.toggle(className);
}, myElement);

- rayalois22

---

我认为你误解了 classList.toggle() 的工作方式。它确实允许有第二个参数，但那是用作第一个参数的条件，第一个参数则是要切换的类。它不允许同时切换两个类。请参见 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList。 - agrm

@agrm 感谢您的纠正。我会尽快编辑我的答案，以免误导他人。 - rayalois22

@rayalois22，您能否编辑一下这个回答吗？它不起作用啊！ - Safwan Samsudeen

@safwan-samsudeen，我已经编辑了我的答案，当前版本在我的端上运行良好。希望有人会发现它有用。 - rayalois22

Answer 10

如果我需要切换多个类，我只需创建一个数组，然后通过迭代来实现。

  var classes = [
    "red",
    "blue",
    "green",
    "purple"
  ]

  for (var i = 0; i < classes.length; i++){
    p.classList.toggle(classes[i])
  }

- sado

---

这只是简单地切换所有内容并将其留在最后一个。我认为这不是 OP 想要的。 - misteroptimist