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

Question

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

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

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

因此，有没有人知道用什么方法来写这个例子？

Answer 1

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

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);
        }
    );
}

Answer 2

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

当只存在一个参数时，切换(字符串、强制)：切换类值；即，如果类存在，则删除它，如果不存在，则添加它。当存在第二个参数时:如果第二个参数为true，则添加指定的类值，如果为false，则删除它。

参考在这里。

您可能会编写自己的“实用程序”函数(在vanilla中)，它可以做您想做的事情，下面是一个非常简单的演示示例，它运行在classList API之上：

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

你这样称呼它：

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

Answer 3

对于任何寻求简短答案的人，您可以使用ES6/ES6 2015中引入的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 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>

​