Is it possible to exchange CSS classes for a specific group of elements using JQuery?

Question

Is it possible to exchange CSS classes for a specific group of elements using JQuery?

I have two list items listed below:

<li name="luxury" class="cars luxury>                                           
    <div id="featured_lux" name="featured" class="carImg_lux col2_lux ">
        My Luxury Car<img border="0" class="car-image_lux" src="/images/toycar_luxury.gif">
    </div>

    <div class="brandName_lux col2_lux">
        <h2 class="showBig_lux">
            Ferrari or Ford Mustang
        </h2> 

    </div>          

</li>

AND this

<li name="normal" class="cars normal>
    <div id="featured_normal" name="normal" class="carImg_normal col2_normal ">
        My Normal Car<img border="0" class="car-image_lux" src="/images/toycar_normal.gif">
    </div>

    <div class="brandName_normal col2_normal">
        <h2 class="showBig_normal">
            Alto or Innova
        </h2> 

    </div>          

</li>

Both sections look similar. The only difference is their CSS class and content.

Is there a way to easily swap the CSS classes for both sets of elements using jQuery? For example, applying the Luxury CSS class to the Normal Car Section and vice versa.

I know I can do this using addClass() and removeClass() in jQuery. But is there a more direct approach with minimal lines of code?

This change should occur by default based on some condition, without requiring any clicking or hovering.

I prefer not to use any external libraries if possible.

Please help. Thank you :)

javascript jquery css

Answer 1

Answer №1

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

$(function() {
    $('.swap').click(function() {
        $('.a, .b').toggleClass('a b');
    });
});

.a { background: red; }
.b { background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>
<div class="a">#</div>
<div class="b">#</div>
<input type="button" class="swap" value="Swap Classes" />

To swap classes by passing them to a function, you can do the following:

$(function() {
    swapClasses('red', 'blue');
    function swapClasses(a, b) {
        $('.' + a + ', ' + '.' + b).toggleClass(a + ' ' + b);
    }
});

body {
    color: white;
    font-weight: bold;
}
div {
    padding: 4px;
    margin: 4px;
}
.red { background: red; }
.blue { background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>
<div class="red">RED</div>
<div class="blue">BLUE</div>

Check out the fiddle here: https://jsfiddle.net/z2ogcs3x/

Answer 2

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

$(function() {
    $('.swap').click(function() {
        $('.a, .b').toggleClass('a b');
    });
});

.a { background: red; }
.b { background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>
<div class="a">#</div>
<div class="b">#</div>
<input type="button" class="swap" value="Swap Classes" />

To swap classes by passing them to a function, you can do the following:

$(function() {
    swapClasses('red', 'blue');
    function swapClasses(a, b) {
        $('.' + a + ', ' + '.' + b).toggleClass(a + ' ' + b);
    }
});

body {
    color: white;
    font-weight: bold;
}
div {
    padding: 4px;
    margin: 4px;
}
.red { background: red; }
.blue { background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>
<div class="red">RED</div>
<div class="blue">BLUE</div>

Check out the fiddle here: https://jsfiddle.net/z2ogcs3x/

Answer 3

Answer №2

If you prefer to use plain vanilla code instead of jQuery, you can visit a helpful site called You Might Not Need jQuery. This site showcases jQuery methods alongside their vanilla JavaScript alternatives.

For instance:

Instead of using jQuery code like this:

$(el).addClass(className);

You can achieve the same result with vanilla JavaScript like this:

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

Answer 4

If you prefer to use plain vanilla code instead of jQuery, you can visit a helpful site called You Might Not Need jQuery. This site showcases jQuery methods alongside their vanilla JavaScript alternatives.

For instance:

Instead of using jQuery code like this:

$(el).addClass(className);

You can achieve the same result with vanilla JavaScript like this:

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

Is it possible to exchange CSS classes for a specific group of elements using JQuery?

Answer №1

Answer №2

Similar questions

How can a JavaScript file interact with a backend without needing to specify the URL in the compiled code, thanks to webpack?

JavaScript - Two tables shown in parallel

What are some methods for converting data from data tables into alternative formats?

Designing a personalized look for a property with Styled-System

What is preventing me from using JavaScript to generate labels?

Utilize Jquery to extract HTML content from an array of links and implement regular expressions

Converting the stage object to JSON format and incorporating it into an HTML5 environment using

Verify for a class that does not exist

Text alignment below a div with absolute positioning

Tips for repositioning the window when linking to a different section of a website

The animation loop completes and restarts from the initial keyframe

Ensure that the bootstrap popover remains hidden when clicked outside of it, unless there is an element within the

Combining Angular with MVC partial views

Matching utility types and themes in Tailwind CSS

Guide to creating a dynamic dropdown with Ajax in Codeigniter

Vue.js seems to be leading me down a long and steady path of progress at a snail

What are the steps to transition from @zeit/next-sass deprecation?

What is the best way to showcase a collection of items using a table layout in JavaScript?

Turn only one bracket on the accordion

My Ajax request does not seem to function properly when attempting to transfer data to a different