jQuery switch classes on click

Question

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!

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. — fdomn-m
– fdomn-m, Commented Feb 19, 2019 at 11:59

fdomn-m · Accepted Answer · 2019-02-19 12:04:30Z

3

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.

edited Feb 19, 2019 at 12:04

answered Feb 19, 2019 at 11:58

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Krullmizter Over a year ago

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!

fdomn-m Over a year ago

Glad it helps. It's not always easy to describe an issue and, especially in development, precise wording can make a difference.

Somnath Mondal · Accepted Answer · 2019-02-19 12:03:51Z

1

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

answered Feb 19, 2019 at 12:03

Somnath Mondal

948 bronze badges

Comments

Deniss · Accepted Answer · 2019-02-19 12:05:56Z

0

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>

answered Feb 19, 2019 at 12:05

Deniss

922 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery switch classes on click

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related