时间戳

首页 > 解决方案 > jquery 类切换变量：意外的标识符

jquery - jquery 类切换变量：意外的标识符

问题描述

快速说明：不知道为什么我在 SO/其他地方找不到这个问题。希望不是骗子。

问题：如何将至少两个类作为变量传递给 jQuery 的 toggleClass？

在这个简单的片段中，如果我使用类名，它就可以完美地工作

var varRed = "red", varUpper = "upper";
$("#test").on("click", function() {
	$(this).toggleClass('red upper');
});
.red{color: red;}
.upper{text-transform: capitalize;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">class toggle</div>

如何获得等价的$(this).toggleClass('red upper');变量？

$(this).toggleClass(varRed varUpper);

后者引发错误。

显然可以这样做：

$(this).toggleClass(varRed).toggleClass(varUpper);

但我试图理解为什么 .toggleClass('red upper') 有效，而 toggleClass(varRed varUpper) 无效。

先感谢您

标签： jquery

解决方案

你需要使用

$(this).toggleClass(varRed + ' ' + varUpper);

但我试图理解为什么 .toggleClass('red upper') 有效，而 toggleClass(varRed varUpper) 无效。

这就是你在 JavaScript 中连接两个字符串的方式，这就是你基本上想要做的事情。

你也可以传递一个数组，这可能是更好的语法

$(this).toggleClass([varRed, varUpper])

推荐阅读