jQuery switch classes on click

jquery toggle between two classes
javascript toggle class onclick
jquery add remove class onclick
jquery add class on click
jquery toggle multiple classes
jquery remove class
javascript toggle class without jquery
jquery replace class

I have a WordPress site where I have some "pipe" elements which I want to change color when clicked. I'm new to jQuery so I would need some help to do this. This is what I have so far (a very simplified version of it all):

jQuery:

jQuery(function() {
  jQuery(".--clearGreen").click(function() {
    jQuery(this).addClass("--clearGreenClicked");
  });
});

CSS:

.--clearGreen {
 background-color: rgba(255, 255, 255, 0);
 border: 2px solid green;
}

.--clearGreenClicked {
 background-color: blue;
 border: 2px solid blue;
 color: white;
}

This works to add the .--clearGreenClicked class to the clicked .--clearGreen "pipe" that I have on the page. What I would like to achieve is to make it so that only the clicked "pipe" gets the change applied to it and all the other "pipes" return to the original styling, so basically that they "switch" styles depending on what "pipe" is clicked. I've tried to use .not in combination with .has but I can't seem to get it to work properly. Thanks!

As worded:

only the clicked pipe gets the change and the other pipes [remain] with the original styling"

your code does exactly that, because you've used $(this).addClass.

So assuming you're asking "and the other pipes return to the original styling", so only one is "selected" at a time:

jQuery(function() {
  jQuery(".--clearGreen").click(function() {
    jQuery(".--clearGreenClicked").removeClass("--clearGreenClicked");
    jQuery(this).addClass("--clearGreenClicked");
  });
});

Additional:

You can use .not to reduce the changes made, eg:

jQuery(".--clearGreenClicked").not(this).removeClass("--clearGreenClicked");
jQuery(this).addClass("--clearGreenClicked");

which will stop the code from removing and then re-adding the class - this could make a difference if you have a transition on the css.

jQuery onclick toggle class name, jQuery has a toggleClass function: <button class="switch">Click me</button> < div class="text-block collapsed pressed">some text</div>� The .switchClass() method allows you to animate the transition of adding and removing classes at the same time. Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another while allowing you to keep all the details about which styles to change in CSS and out of your JavaScript.

<script type="text/javascript">
    jQuery(function () {
        jQuery(".--clearGreen").click(function () {
            jQuery(this).toggleClass("--clearGreenClicked");
        });
    });
</script>

jQuery toggleClass() Method, jQuery toggleClass() Method The toggleClass() method toggles between adding and removing one or more class names from the selected elements. This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect. If a class is present on the element then switch the post-unread class with post-read and change button text to 'UnRead'. Similarly, if the class does not present then switch post-read class with post-unread and change button text with 'Read'.

Use toggleClass function to remove class when it exist and add class if it doesn't exist. Like this:

<script type="text/javascript">
    jQuery(function () {
        jQuery('.--clearGreen').click(function () {
            jQuery(this).toggleClass('--clearGreenClicked');
        });
    });
</script>

jQuery toggleClass(), The jQuery toggleCLass() method is used to add or remove one or more classes from the selected elements. This method toggles between adding and removing one or more class name. It checks each element for the specified class names. If the class name is already set, it removes and if the class name is missing, it adds. This is a String and represents the CSS class name, or space-delimited list of class names, to be removed. 2: addClassName. This is of type String and represents one or more class names (space separated) to be added to the class attribute of each matched element. 3: options. This represents all animation settings. All properties are optional.

.switchClass(), Description: Adds and removes the specified class(es) to each of the set of keep all the details about which styles to change in CSS and out of your JavaScript. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Toggle Class, Toggle class(es) on elements while animating all style changes. Sed pede. Run Effect. Click the button above to preview the effect. view source� The toggleClass () method toggles between adding and removing one or more class names from the selected elements. This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect. However, by using the "switch" parameter, you can specify to only remove, or only add a class name.

How to use switchClass and toggleClass in jQuery, # Example 1 – Switch one class with another. Within the example creating a post list which is in unread state and when Read button gets clicked� As of jQuery 1.4, if no arguments are passed to .toggleClass(), all classes on the element the first time .toggleClass() is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.

Comments
  • use toggle for class
  • can you post a fiddle ?
  • Your wording does not match your code. "this works to add the class to all the pipes" - nope, it only does it to the one you clicked, which is then what you're asking. If you can create an minimal reproducible example (snippet) you might be able to explicitly demonstrate the issue to us.
  • @freedomn-m absolutely
  • @freedomn-m I think your answer meets what the OP wants ;)
  • Hmm yeah, I should have formatted it better, but this fixes my issue. And it was this simple well I got some to learn, but many thanks for your answer!
  • Glad it helps. It's not always easy to describe an issue and, especially in development, precise wording can make a difference.