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

Question

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

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

在我的示例中，只有两个类可以更改，但也可以是多个类...

因此，因此：有谁知道一种编写示例的方法，以减少冗余？

Answer 1

不，不能Element.classList直接使用API。查看API，您可以阅读：

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

参考这里。

您可以编写自己的“实用程序”函数（在 vanilla JS 中），它可以执行您想要的操作，下面是一个在classListAPI之上工作的非常简单的演示示例：

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

你这样称呼它：

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

Answer 2

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

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

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

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

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 }

Answer 3

只需使用地图数组。

喜欢

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

Answer 4

以下应该有效；假设这些类名是在 CSS 中定义的，并且当前页面上的某些元素具有这些类名：

var toggleDirection = function()
{
    var ltr, rtl, lst, cls;

    ltr = 'left-to-right';
    rtl = 'right-to-left';
    lst = [].slice.call(document.getElementsByClassName(ltr));

    lst = ((lst.length > 0) ? lst : [].slice.call(document.getElementsByClassName(rtl)));

    lst.forEach
    (
        function(node)
        {
            cls = node.getAttribute('class');

            if (cls.indexOf(ltr) > -1)
            { cls.split(ltr).join(rtl); }
            else
            { cls.split(rtl).join(ltr); }

            node.setAttribute('class', cls);
        }
    );
}