Question

我有这段代码：

$("body.ow-client1 #stage-nav li.nav1 a").addClass("sub-nav-active");
$("body.ow-client2 #stage-nav li.nav2 a").addClass("sub-nav-active");
$("body.ow-client3 #stage-nav li.nav3 a").addClass("sub-nav-active");
$("body.ow-client4 #stage-nav li.nav4 a").addClass("sub-nav-active");
$("body.ow-client5 #stage-nav li.nav5 a").addClass("sub-nav-active");
$("body.ow-client6 #stage-nav li.nav6 a").addClass("sub-nav-active");
$("body.ow-client7 #stage-nav li.nav7 a").addClass("sub-nav-active");
$("body.ow-client8 #stage-nav li.nav8 a").addClass("sub-nav-active");
$("body.ow-client9 #stage-nav li.nav9 a").addClass("sub-nav-active");

这一切都很好，但我想知道是否有一个速记来写这个？

Answer 1

尝试以下

var i;
for (i = 1; i <= 9; i++) {
  var sel = 'body.ow-client' + i + ' #stage-nav li.nav' + i + ' a';
  $(sel).addClass("sub-nav-active");
}

Answer 2

首先，你可以将选择器连在一起：

$("body.ow-client1 #stage-nav li.nav1 a, body.ow-client2 #stage-nav li.nav2 a, body.ow-client3 #stage-nav li.nav3 a").addClass("sub-nav-active");

但这很难读。为什么需要编号ow-clientX类？

Answer 3

我认为这是你能做到的唯一方法。

$("body.ow-client9 #stage-nav li a").addClass("sub-nav-active");

Answer 4

你也可以在没有JS代码的情况下将它放在样式表中：

<style>

body.ow-client1 #stage-nav li.nav1 a,
body.ow-client2 #stage-nav li.nav2 a,
body.ow-client3 #stage-nav li.nav3 a,
/* ... */
body.ow-client9 #stage-nav li.nav9 a {
                                       /* styles 
                                          from sub-nav-active
                                          here */
                                     }
</style>

你实际上不会再有一个名为sub-nav-active的类，你只需使用选择器应用适当的样式，如上所示。

（显然这个解决方案只有在sub-nav-active的唯一要点是将样式应用于活动部分中的锚元素时才有效：如果你还在其他JS代码中将它用作jQuery选择器那么它就不会工作。）

jQuery简写多个addClass？

4 个答案: