Changing CSS classes with each click of the user, using Jquery

Question

Changing CSS classes with each click of the user, using Jquery

Looking for a way to seamlessly switch between two links with different CSS classes each time a user clicks? Here's what's currently happening:

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

As it stands, the code only works once. Subsequent clicks do not produce the desired result:

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

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

The objective is to alter the color through CSS.

javascript jquery html css

Answer 1

Answer №1

Both methods are essentially performing the same function. The issue arises from assigning the same class to each tag, resulting in it only working correctly the first time. On subsequent attempts, it simply resets the current class. Wouldn't it be better to revise the code to something 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");
})

Answer 2

Both methods are essentially performing the same function. The issue arises from assigning the same class to each tag, resulting in it only working correctly the first time. On subsequent attempts, it simply resets the current class. Wouldn't it be better to revise the code to something 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");
})

Answer 3

Answer №2

If you want to toggle multiple classes, you can use the toggleClass method.

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

Answer 4

If you want to toggle multiple classes, you can use the toggleClass method.

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

Answer 5

Answer №3

To target elements whose class name starts with "class", use the selector "[class^=class]". Extract characters from a string up to the last character by using .slice() with the parameters 0, -1. Check if the last character is 1 or 2 using the == comparison operator. Toggle the last character to the opposite value for matches: 1 becomes "2", and 2 becomes "1" in the class name of the element.

$("[class^=class]").click(function() {
  var className = this.className;
  this.className = className.slice(0, -1) + (className[className.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>

Answer 6

To target elements whose class name starts with "class", use the selector "[class^=class]". Extract characters from a string up to the last character by using .slice() with the parameters 0, -1. Check if the last character is 1 or 2 using the == comparison operator. Toggle the last character to the opposite value for matches: 1 becomes "2", and 2 becomes "1" in the class name of the element.

$("[class^=class]").click(function() {
  var className = this.className;
  this.className = className.slice(0, -1) + (className[className.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>

Answer 7

Answer №4

I have successfully implemented the toggleClass function using JSFIDDLE. You can view the demo here.

This is the HTML code snippet:

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

Below is the JavaScript code used:

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

And here is the CSS styling applied:

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

Answer 8

I have successfully implemented the toggleClass function using JSFIDDLE. You can view the demo here.

This is the HTML code snippet:

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

Below is the JavaScript code used:

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

And here is the CSS styling applied:

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

Answer 9

Answer №5

When you select class1 once, it switches from having the class class1 to having the class class2.

However, if you click it again, because class1 is already set to class2, it remains unchanged.

A possible solution would be:

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);
});

Answer 10

When you select class1 once, it switches from having the class class1 to having the class class2.

However, if you click it again, because class1 is already set to class2, it remains unchanged.

A possible solution would be:

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);
});

Changing CSS classes with each click of the user, using Jquery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Display or conceal elements using the unique identifier selected from a dropdown menu in JavaScript

How do you feel about sharing HTML files online?

The Typeahead function encountered an error: it seems that the toLowerCase method is not

The DOM lacks the assigned 'id' in the HTML

Trouble with ajax call in Internet Explorer 8

instructions on invoking a function within the knockout $.getJSON() operation

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

What is the reason behind the failure of the jquery.hide() function on this particular UL element?

Incorporating fancybox on a dynamically loaded AJAX page

What are the essential tools needed to extract, interact, and evaluate information from a webpage?

Utilize Google Charts Table Chart to extract data from an object-literal notation data source

Can fog be applied from a fixed location within a three.js scene without being tied to the camera's position?

"Encountering a 404 error while using Struts ajax

Error: An unrecognized symbol '<' was encountered while utilizing $routeparams

What is the best way to begin the main page content below the stationary header in order to prevent any overlap with the hyperlink section?

The picture won't stay within the confines of the container

Tips for resolving CORS error in swagger-ui-express

How come the values in my object remain inaccessible even after assigning values to it with navigator.geolocation.getCurrentPosition() and returning it?

Tips for creating the ultimate footer section on your webpage

The quickest regular expression match possible if it is already a subsection of another match