Question

我通过下面的代码点击按钮来设置多个元素的类：

$('button.but1').on('click', function() {
    $(".div1,.div2,.div3").addClass("focus");
    $(".div1,.div2,.div3").css("z-index", "99");
    $(".div1,.div2,.div3").css("opacity", "1");
});
$('button.but2').on('click', function() {
    $(".div4,.div5,.div6").addClass("focus");
    $(".div4,.div5,.div6").css("z-index", "99");
    $(".div4,.div5,.div6").css("opacity", "1");
});

HTML：

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<button type="button" class="but1" href="#">But1</button>
<button type="button" class="but2" href="#">But2</button>

我遇到的问题是我只希望选择div为“焦点”（类），所有其他div，而不是来自同一组的需要删除“焦点”类。不确定我们要去哪儿？

Answer 1

您可以在将类添加到元素集之前删除已添加的类。例如：

 $(".focus").removeClass("focus");
 $(".div4,.div5,.div6").addClass("focus");

完整代码：

$('button.but1').on('click', function() {
  $(".focus").removeClass("focus");
  $(".div1,.div2,.div3").addClass("focus");
  $(".div1,.div2,.div3").css("z-index", "99");
  $(".div1,.div2,.div3").css("opacity", "1");
});

$('button.but2').on('click', function() {
  $(".focus").removeClass("focus");
  $(".div4,.div5,.div6").addClass("focus");
  $(".div4,.div5,.div6").css("z-index", "99");
  $(".div4,.div5,.div6").css("opacity", "1");
});

Answer 2

只需从所有其他＆＃39;中删除该课程即可。首先是div：

$('button.but1').on('click', function() {
    $(".div4,.div5,.div6").removeClass("focus");
    $(".div1,.div2,.div3").addClass("focus");
    $(".div1,.div2,.div3").css("z-index", "99");
    $(".div1,.div2,.div3").css("opacity", "1");
});
$('button.but2').on('click', function() {
    $(".div1,.div2,.div3").removeClass("focus");
    $(".div4,.div5,.div6").addClass("focus");
    $(".div4,.div5,.div6").css("z-index", "99");
    $(".div4,.div5,.div6").css("opacity", "1");
});

Jquery删除类多个元素

2 个答案: