Jquery 删除 Class 多个元素

Question

我通过以下代码通过单击按钮将 class 设置为多个元素：

$('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 被选为 "focus"（class），所有其他 div，而不是来自同一组需要删除 "focus" class。不确定我们要去哪里？

Answer 1

您可以删除已添加的 class，然后再将 class 添加到 elements.like 的集合中：

 $(".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

首先从所有 'other' div 中删除 class：

$('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 删除 Class 多个元素

Jquery Remove Class Multiple Elements

jquery

addclass

elements