Vanilla JavaScript：有没有办法在一条语句中切换多个 CSS 类？

Question

我使用这些 JavaScript 代码来更改脚本中的类：

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

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

因此：有谁知道编写示例的方法不那么冗余？

原文由 cluster1 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下应该有效；假设这些类名是在您的 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);
        }
    );
}

原文由 user4244405 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

参考这里。

您可以编写自己的“实用程序”函数（在 vanilla 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 发布，翻译遵循 CC BY-SA 4.0 许可协议