我通过以下代码通过单击按钮将一个类设置为多个元素:
$('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”(该类),所有其他div(而不是同一组)都需要删除“focus”类。不确定要去哪一个?
最佳答案
您可以在将类添加到元素集之前删除已添加的类。如下所示:
$(".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");
});