Jquery Remove Class Multiple Elements

Question

I am setting a class to multiple elements via a Button click via the code below:

$('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>

The issue I am having is that I only want the div selected to be "focus"(the class), all the other div, not from the same group need to have the "focus" class removed. Not sure which we to go?

Milind Anantwar · Accepted Answer · 2015-04-15 16:05:28Z

You can remove the already added class before adding the class to set of elements.like this:

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

Complete Code:

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

j08691 · Accepted Answer · 2015-04-15 16:05:53Z

Just remove the class from all the 'other' divs first:

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

Collectives™ on Stack Overflow

Jquery Remove Class Multiple Elements

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related