Using jQuery and CSS to change to "loading" status

Question

Using jQuery and CSS to change to "loading" status

My current setup includes the following:

<div class="click red"></div>
<div class="click green"></div>
<div class="click blue"></div>

When the "click" is clicked, I want to add the class "load" to the div. I have successfully achieved this, but the "red," "green," and "blue" classes all have background images set, so I need to remove those classes. While I know how to do this in a sloppy way by extracting the class for the div "click blue" (as returned by jQuery), stripping out what I need, and replacing it, I believe there must be a more proper method.

What is the correct approach to accomplish this task? I need to remove the second class from the div and replace it with the class "load." Is there a specific method to call each class individually, something like .attr("class")[2]?

jquery css

Answer 1

Answer №1

If you are aware that the class is "click", you have the option to simply assign the class, rather than constantly adding and removing it. Here's how:

$('div').attr('class', 'click load');

If you are certain about the classes (assuming this is a basic example) you wish to eliminate, you can proceed as follows:

$("div").removeClass('red green blue').addClass('load');

Edit: After receiving feedback - You can save the class using $.data() and retrieve it later to revert back after loading. This can be done in the following way:

Within your click function:

$.data(this, 'class', $(this).attr('class')); //save the original class
$(this).attr('class', 'click load');          //assign the loading class

To restore it later:

$(this).attr('class', $.data(this, 'class')); //restore original class

Answer 2

If you are aware that the class is "click", you have the option to simply assign the class, rather than constantly adding and removing it. Here's how:

$('div').attr('class', 'click load');

If you are certain about the classes (assuming this is a basic example) you wish to eliminate, you can proceed as follows:

$("div").removeClass('red green blue').addClass('load');

Edit: After receiving feedback - You can save the class using $.data() and retrieve it later to revert back after loading. This can be done in the following way:

Within your click function:

$.data(this, 'class', $(this).attr('class')); //save the original class
$(this).attr('class', 'click load');          //assign the loading class

To restore it later:

$(this).attr('class', $.data(this, 'class')); //restore original class

Using jQuery and CSS to change to "loading" status

Answer №1

Similar questions

Is there a way to stop the execution of myFunc after it has been performed 5 times using clearInterval?

There seems to be a clash between Modal Semantic UI React and Bootstrap causing issues

What is the best way to preserve drop down selections on a page containing numerous dynamically named drop down lists in asp.net mvc 2?

Customize the underline color of Material-UI's Input component

swap out a JavaScript function for a fresh function

Utilize a class within a Framer Motion element to incorporate animations or set initial properties

What is the best way to rearrange a sidebar column to be positioned between central content columns on a mobile

Determining the exact position of an absolute element within a Bootstrap container

The radio button's dynamically created OnClick event is unresponsive

Nested loops combined with a timeout occasionally results in failure

Guide the user to a specific website and replicate the user's action of pressing the down arrow or clicking a button three consecutive times

Is it common for functions to be outlined in standard CSS practices?

Header unresponsive to user interactions

The print preview displays a single div in an incorrect location

How can I display the most recent offcanvas opening at the top of the page?

Is there a way to display a sub-menu while scrolling through a sub menu?

What is the proper method for extracting XML data in PHP that was transmitted to the server in the format of text/xml?

Tips for sending a file array together with other string/int variables from JavaScript to PHP

Preserve scripts when loading content into a pjax container

Expanding content based on height using React