jQuery的刪除類多個元素

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

您可以添加類設置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

剛剛從所有的「其他」刪除類divs優先：

$('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"); 
});