Utilize jQuery to toggle and swap between multiple classes

Question

Utilize jQuery to toggle and swap between multiple classes

I am looking to implement a feature where clicking on certain cells will add and switch classes, similar to a calendar schedule.

I attempted the code sample below, but it did not successfully toggle each class.

The desired outcome is to switch classes like this through clicks:

null→classA→classB→classC→null→classA

Here is my current code snippet:

$("#our_calendar td")     
      .click(function() {  
       $(this).toggleClass('classA classB classC');
 });

I intend to change the color of the cells by creating corresponding CSS styles for them.

.classA {
    background-color: rgb(0,255,0);
}

.classB {
    background: linear-gradient(to bottom, yellow 49%,yellow 1%, rgb(0, 255, 0) 1%,rgb(0, 255, 0) 50%);
}

.classC {
    background: linear-gradient(to bottom, yellow 49%,yellow 1%, aqua 1%, aqua 50%);
}

If anyone knows how to achieve this functionality, please share your insight. Thank you!

javascript jquery html css

Answer 1

Answer №1

If you're looking for a solution, consider implementing the following logic. Begin by creating a local variable that stores an array of classes. Utilize the data-class-index attribute within the td elements to determine which class to apply next.

Take a look at the code snippet below:

$(function(){
 var classArray = ['class1','class2','class3'];
 var arrLength = classArray.length;
 $("#calendar_table td").click(function() {  
       var currentIndex = $(this).data('class-index');
       $(this).removeClass(classArray[currentIndex]);
       if(currentIndex < (arrLength-1)) {
         currentIndex++;
       }  else {
         //reset index
         currentIndex = 0;
       }
       $(this).addClass(classArray[currentIndex]);
       $(this).data('class-index',currentIndex);
 });
});

.class1 {
    background-color: rgb(255,0,0);
}

.class2 {
    background: linear-gradient(to bottom, green 49%,green 1%, rgb(255, 0, 0) 1%,rgb(255, 0, 0) 50%);
}

.class3 {
    background: linear-gradient(to bottom, green 49%,green 1%, blue 1%, blue 50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="calendar_table">
 <tr><td class="class1" data-class-index="0">Date Value 1</td></tr>
 <tr><td class="class1" data-class-index="0">Date Value 2</td></tr>
 <tr><td class="class1" data-class-index="0">Date Value 3</td></tr>
</table>

Answer 2

If you're looking for a solution, consider implementing the following logic. Begin by creating a local variable that stores an array of classes. Utilize the data-class-index attribute within the td elements to determine which class to apply next.

Take a look at the code snippet below:

$(function(){
 var classArray = ['class1','class2','class3'];
 var arrLength = classArray.length;
 $("#calendar_table td").click(function() {  
       var currentIndex = $(this).data('class-index');
       $(this).removeClass(classArray[currentIndex]);
       if(currentIndex < (arrLength-1)) {
         currentIndex++;
       }  else {
         //reset index
         currentIndex = 0;
       }
       $(this).addClass(classArray[currentIndex]);
       $(this).data('class-index',currentIndex);
 });
});

.class1 {
    background-color: rgb(255,0,0);
}

.class2 {
    background: linear-gradient(to bottom, green 49%,green 1%, rgb(255, 0, 0) 1%,rgb(255, 0, 0) 50%);
}

.class3 {
    background: linear-gradient(to bottom, green 49%,green 1%, blue 1%, blue 50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="calendar_table">
 <tr><td class="class1" data-class-index="0">Date Value 1</td></tr>
 <tr><td class="class1" data-class-index="0">Date Value 2</td></tr>
 <tr><td class="class1" data-class-index="0">Date Value 3</td></tr>
</table>

Answer 3

Answer №2

To toggle multiple classes, you need to call the toggle function for each individual class. For more information, refer to this thread on Stack Overflow: ( Toggle multiple element classes with jQuery)

 $("#our_calendar td")    
    .click(function() {  
     $(this).toggleClass("classA").toggleClass("classB").toggleClass("classC");
 });

View the working example here:

https://jsfiddle.net/mohammadyaseer/qn2m01fu/4/

Answer 4

To toggle multiple classes, you need to call the toggle function for each individual class. For more information, refer to this thread on Stack Overflow: ( Toggle multiple element classes with jQuery)

 $("#our_calendar td")    
    .click(function() {  
     $(this).toggleClass("classA").toggleClass("classB").toggleClass("classC");
 });

View the working example here:

https://jsfiddle.net/mohammadyaseer/qn2m01fu/4/

Answer 5

Answer №3

To customize your jQuery code, consider making the following adjustments:

$("#our_calendar td").click(function() {
   if ($(this).hasClass("classA")) {
    $(this).toggleClass("classA classB");
  } else if ($(this).hasClass("classB")) {
    $(this).toggleClass("classB classC");
  } else if ($(this).hasClass("classC")) {
    $(this).toggleClass("classC");
  }
});

If you want to cycle through the classes instead, you can try this method:

$("#our_calendar td").click(function() {
   if ($(this).hasClass("classA")) {
    $(this).toggleClass("classA classB");
  } else if ($(this).hasClass("classB")) {
    $(this).toggleClass("classB classC");
  } else if ($(this).hasClass("classC")) {
    $(this).toggleClass("classC classA");
  }
});

Answer 6

To customize your jQuery code, consider making the following adjustments:

$("#our_calendar td").click(function() {
   if ($(this).hasClass("classA")) {
    $(this).toggleClass("classA classB");
  } else if ($(this).hasClass("classB")) {
    $(this).toggleClass("classB classC");
  } else if ($(this).hasClass("classC")) {
    $(this).toggleClass("classC");
  }
});

If you want to cycle through the classes instead, you can try this method:

$("#our_calendar td").click(function() {
   if ($(this).hasClass("classA")) {
    $(this).toggleClass("classA classB");
  } else if ($(this).hasClass("classB")) {
    $(this).toggleClass("classB classC");
  } else if ($(this).hasClass("classC")) {
    $(this).toggleClass("classC classA");
  }
});

Utilize jQuery to toggle and swap between multiple classes

Answer №1

Answer №2

Answer №3

Similar questions

Using two different Readable streams to pipe to the same Writable stream multiple times

Assigning a class to the following item in a list with a click event (However, this action will cease once the last item

The CloudWatch logs for a JavaScript Lambda function reveal that its handler is failing to load functions that are defined in external

Enable swipe functionality for mobile users

Integrating data binding within a .append function using AngularJS

Fill in a text box with a chosen value from a linked drop-down menu

Filtering a section of the HTML using Ajax and jQuery

A guide to revealing the value of a button or anchor tag using AngularJS

Sending data from a dynamically created PHP table to a modal

Having difficulty sending a jQuery ajax() request to a PHP file

Guide to dynamically inserting an audio file into a div with jQuery

If the socket cannot be found, an error callback will be activated

Only the initial value is being processed in the for loop using Javascript

Working with CSS3 transitions in PHPStorm is a breeze

The function of React's useState is not available

Select the hidden HTML option value automatically according to the previous option selected

The website's scrolling speed is painfully slow

How can I solve the issue of connecting to a database with mysql_connect() in PHP?

determining the window width using javascript

Retrieving the Input Value in Laravel Views