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

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

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

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

---

因此：是否有人知道一种编写示例的方法来减少冗余？

否直接使用

元素.classList

API是不可能的。查看API，您可以阅读：

仅存在一个参数时切换（字符串[，强制]）：切换 阶级价值；i、 例如，如果类存在，则删除它，如果不存在，则添加 信息技术当存在第二个参数时：如果第二个参数为真， 添加指定的类值，如果为false，则将其删除

您可以编写自己的“实用程序”函数（使用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');

---

以下几点应该有效；假定这些类名在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);
        }
    );
}

---

您可以使用以下

multitogle

if (window["DOMTokenList"]) //check if DOMTokenList is an existing object.
{
//multitoggle
DOMTokenList.prototype.multiToggle = function()
{
    if (arguments.length > 0) // there needs to be at least one object
    {
        for (argument in arguments) //loop all arguments
        {
            var argument = arguments[argument];
            //All primitives are allowed as input (Symbol not included). If not a primitive, raise error.
            if (Object.prototype.toString.call(argument) !== "[object Undefined]" && Object.prototype.toString.call(argument) !== "[object Null]" && Object.prototype.toString.call(argument) !== "[object String]" && Object.prototype.toString.call(argument) !== "[object Number]" && Object.prototype.toString.call(argument) !== "[object Boolean]")   
            {
                throw new SyntaxError;
            }
            else
            {
                if (this.contains(argument)) //check if classList contains the argument.
                {
                    this.remove(argument); //if so remove
                }
                else
                {
                    this.add(argument); //if not add
                }                   
            }
        }
    }
    else
    {
        throw new Error("The argument is not optional");
    }
    return undefined; //return undefined as with add and remove.
}       
}

multi-toggle

没有原始

切换的
强制
功能。它只是为提供的参数打开和关闭类名

警告，扩展固定对象可能会在将来引发问题。当对象被弃用或更改时，您的功能可能会中断，需要进行更多维护

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

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']);

如果我需要切换多个类，我只需要创建一个数组，然后遍历它

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

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


var类=[
“红色”，
“蓝色”，
“绿色”，
“紫色”
]
对于（var i=0；i
对于任何想要简短答案的人，您可以使用ES6/ES2015中引入的rest参数在一行中完成此操作：

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

这非常接近，但利用了rest参数将返回一个数组这一事实——不管传递给函数的参数有多少。这意味着我们可以跳过检测是使用字符串还是数组的部分


consttogglecsslasses=（el，…cls）=>cls.map（cl=>el.classList.toggle（cl））；
const one=document.querySelector（“.one”）；
一.addEventListener（“单击”，（）=>{
切换CSSClasses（一个“class1”）；
});
consttwo=document.querySelector（“.two”）；
2.添加EventListener（“单击”，（）=>{
切换CSSClasses（两个“class1”、“class2”）；
});
.class1{文本装饰：下划线}
.class2{背景：钢蓝}
单击可切换一个类
单击以切换两个类
只需使用地图数组即可

像

假设myElement是一个有效的DOM元素，这将起作用：

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

这是解决方案的ES6版本

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


const classToggle=（el，…args）=>{
args.map（e=>el.classList.toggle（e））
}
.a{
颜色：红色
}
.b{
背景：黑色
}
c{
边框颜色：黄色
}
单击我
您可以为
元素创建自己的原型
=>这只需切换所有内容并保留在最后一个。我想这不是OP想要的。我想你误解了
classList.toggle（）
的工作方式。它确实允许使用第二个参数，但它被用作第一个参数的条件，第一个参数保存要切换的类。它不允许同时切换两个类。请参阅@agrm，谢谢您的更正。我将很快编辑我的答案，以免误导他人。@rayalois22你能编辑一下答案吗？它不起作用@safwan samsudeen，我已经编辑了我的答案，目前的版本在我这方面运行良好。我希望有人觉得它有用
const classToggle = (el, ...args) => args.map(e => el.classList.toggle(e))