Question

我可以在addClass / removeClass

中使用一个变量

HTML：

<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
</body>

的CSS：

p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlights {
background: yellow;
}

JS：

var css1="selected";
var css2="highlights";

$( "p:last" ).addClass(css1);

我想在addClass方法中使用css1和css2变量。我试过这些：

$( "p:last" ).addClass(css1 css2);
$( "p:last" ).addClass("css1 css2");

它们不起作用。

如果我使用它：

var css3="selected highlights"
$( "p:last" ).addClass(css3);

它有效

但是如何在addClass方法中使用css1和css2变量？

您可以尝试http://jsfiddle.net/hasyo1qm/

感谢。

Answer 1

如其他地方所述，您需要从变量中创建一个以空格分隔的字符串;一种方法（如图所示）：

$( "p:last" ).addClass(css1 + ' ' + css2);

然而，另一种更容易输入的替代方法是使用Array.prototype.join()：

$( "p:last" ).addClass([css1, css2].join(' '));

JS Fiddle demo

实际上，只有连接两个或三个以上的类才会变得更容易。

参考文献：

Array.prototype.join()。

Answer 2

您需要concatenate变量：

$( "p:last" ).addClass(css1 + ' ' + css2);

updated jsFiddle

Answer 3

这有效：

$( "p:last" ).addClass(css1+" "+ css2);

两个类名之间都需要空格，因此使用连接时我们必须在它们之间添加空格，否则它将无法正常运行。

更新的FIDDLE：

http://jsfiddle.net/ehsansajjad465/hasyo1qm/2/

Answer 4

最简单的方法是多次拨打addClass但是在一行中：

 $('p:last').addClass(css1).addClass(css2);

Answer 5

尝试

var css1 = " selected "; // added space before and after text in string
var css2 = " highlights "; // added space before and after text in string

$( "p:last" ).addClass(css1 + css2);

http://jsfiddle.net/hasyo1qm/4/

在addClass / removeClass中使用多个变量

5 个答案:

更新的FIDDLE：