Question

愚蠢的问题，但我无法在网上找到答案。有没有办法一次添加一个类或删除一个类到多个项目？我正在尝试清理代码，在很多情况下我想要压缩它。

$('#div1').addClass('active');
$('#div2').addClass('active');
$('#div3').addClass('active');
$('#div4').addClass('active');

Answer 1

与addClass无关，只与你的jQuery选择器有关。您可以使用逗号分隔多个选择器。例如：

$('#div1, #div2, #div3, #div4').addClass('active');

Answer 2

如前所述，您可以修改选择器以同时处理多个项目。

但是，如果您能够，我建议您将自己的类添加到您想要处理的相关HTML元素中。

即。如果您能够为div元素添加课程，例如

<div id="div1" class="group1">Div 1</div>

然后您可以使用它们同时选择任意数量的元素。请参阅下面的示例代码。

＆＃13;

$(function() {
  $("#toggleGroup1").on('click', function() {
    $(".group1").each(function(idx, element) {
      $(element).toggleClass('active');
    });
  });

  $("#toggleGroup2").on('click', function() {
    $(".group2").each(function(idx, element) {
      $(element).toggleClass('active');
    });
  });
});

＆＃13;

.active {
  text-decoration: underline;
}

.group1.active {
  background-color: green;
}

.group2.active {
  background-color: orange;
}

div {
  color: black;
  border: 1px solid;
  margin: 10px;
  display:inline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="group1">Div one</div>
<div id="div2" class="group1">Div two</div>
<div id="div3" class="group1">Div three</div>
<div id="div4" class="group1">Div four</div>
<div id="div5" class="group2">Div five</div>
<div id="div6" class="group2">Div six</div>
<div id="div7" class="group2">Div seven</div>

<br/><br/>
<button id="toggleGroup1">Toggle Class Group1</button>
<button id="toggleGroup2">Toggle Class Group2</button>

＆＃13;

压缩多个addClass

2 个答案: