Switch CSS class everytime user clicks - Jquery

Question

I have 2 links with different CSS classes. How can I switch between the two everytime a the user clicks?

<a class="class1" id="class1">Class1</a>
<a class="class2" id="class2">Class2</a>

It's just work one time, but when I click a second time, it doesn't work:

$("#class1").click(function(){
    $("#class1").removeClass().addClass("class2");
    $("#class2").removeClass().addClass("class1");
})

$("#class2").click(function(){
    $("#class1").removeClass().addClass("class2");
    $("#class2").removeClass().addClass("class1");
})

The CSS is to change the color

try to use toggleClass and preventDefault action of <a> tag. — kamesh
– kamesh, Commented Oct 7, 2016 at 5:50
you are not specifying which class to remove - but if you are adding/removing a class, you can use toggleClass(...) as suggested by @kamesh - i.e. $("#class1").toggleClass("class2"); — blurfus
– blurfus, Commented Oct 7, 2016 at 5:54

Marcus Höglund · Accepted Answer · 2016-10-07 05:55:53Z

2

The methods are doing the same thing. You set the same class to each tag in both thats why it only works the first time. The second time it just resetting the current class. Shouldn't they be like this instead?

$("#class1").click(function(){
    $("#class1").removeClass().addClass("class2");
    $("#class2").removeClass().addClass("class1");
})

$("#class2").click(function(){
    $("#class1").removeClass().addClass("class1");
    $("#class2").removeClass().addClass("class2");
})

answered Oct 7, 2016 at 5:55

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Keith · Accepted Answer · 2016-10-07 05:53:50Z

2

You can use toggleClass to switch multiple classes..

$('.red,.blue').click(function() {
  $(this).toggleClass('red blue');
});

.red { background-color:red }
.blue { background-color:blue }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">One</div>
<div class="blue">Blue</div>

answered Oct 7, 2016 at 5:53

Keith

24.4k2 gold badges32 silver badges48 bronze badges

Comments

guest271314 · Accepted Answer · 2016-10-07 05:58:03Z

1

You can use selector "[class^=class]" to select elements where Element.className begins with "class"; use .slice() with parameters 0, -1 to select characters in string up to last character; check if last character is 1 or 2 using == equal operator; set the opposite last character for matches 1: "2", 2: "1" at last character of Element.className

$("[class^=class]").click(function() {
  var c = this.className;
  this.className = c.slice(0, -1) + (c[c.length - 1] == 1 ? 2 : 1);      
});

.class1 {
  color: blue;
}

.class2 {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="class1" id="class1">Class1</a>
 <a class="class2" id="clas2">Class2</a>

edited Oct 7, 2016 at 5:58

answered Oct 7, 2016 at 5:54

guest271314

1

1 Comment

kamesh Over a year ago

Best answer... +1 for you answer

kamesh · Accepted Answer · 2016-10-07 06:00:04Z

1

Done using toggleClass JSFIDDLE:https://jsfiddle.net/kameeshwaran/5puecqeq/

HTML:

<a class="class1" id="class1">Class1</a>
<a class="class1" id="class2">Class2</a>

JS

 $(document).ready(function(){
    $(".class1").click(function(e){
      e.preventDefault();
        $(this).toggleClass("class2")
    });
 });

CSS:

.class1{
  background-color:green; 
}
.class2{
  background-color:red;
}

answered Oct 7, 2016 at 6:00

kamesh

2,4343 gold badges28 silver badges33 bronze badges

1 Comment

Timmah Over a year ago

I think @stfvns was trying to flip the classes used on both elements, not just one

Qwerp-Derp · Accepted Answer · 2016-10-07 05:55:22Z

0

When you click class1 once, it removes the class class1 from class1, and puts class2 on.

However, when you click it again, because class1 is set to the class class2, it won't change.

You should probably do something like this:

var class1check = 0;
$("#class1").click(function() {
    if (class1check === 0) {
        var addclass1 = "class2";
        var addclass2 = "class1";
    }
    else {
        var addclass1 = "class1";
        var addclass2 = "class2";
        class1check = 0;
    }
    $("#class1").removeClass().addClass(addclass1);
    $("#class2").removeClass().addClass(addclass2);
});

answered Oct 7, 2016 at 5:55

Qwerp-Derp

4877 silver badges20 bronze badges

Collectives™ on Stack Overflow

Switch CSS class everytime user clicks - Jquery

5 Answers 5

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related