Add / Remove specific class on click

Question

I need to be able to set a specific class on two anchors.

Here is my code so far: http://jsfiddle.net/MV4uM/15/

If you refer to the jsfiddle above currently if you click on "price" the text color changes to red - same for "alphabetical".

However, as these both have different icons associated I need to insert a specific class to be able to change the normal icon to a "selected" to show the user which is selected.

The reason for the specific class is so that I can reference the image within CSS as the image will render through a background image through CSS.

So the end product should be:

When a user clicks on "Price" there will be a class inserted on the anchor named "price-selected" so I can reference this in the CSS. As for "Alphabetical", when the user clicks on the anchor a class named "aplha-selected" so again, I can reference this in the CSS to change the background image to show selected state.

Only one can be selected at a time as this is being used as a "sorter".

prodigitalson · Accepted Answer · 2012-09-24 02:35:21Z

3

Theres no reason to add an additional class.. just base your css off the ID or another static class like sort-price and sort-alpha then you can style like:

.sort-alpha.selected { /* bg image or what have you */ }
.sort-price.selected { /* bg image or what have you */ }

You can do this now without changing a thing by using the ID's:

#alpha.selected { /* bg image or what have you */ }
#price.selected { /* bg image or what have you */ }

Working Fiddle

edited Sep 24, 2012 at 2:35

answered Sep 24, 2012 at 2:29

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

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

1 Comment

Filth Over a year ago

Thanks for this! How did I not see this!?!?! Rookie mistake. Many thanks again.

Ram · Accepted Answer · 2012-09-24 02:31:13Z

3

Try this:

$(".btnSort").click(function () {
    var cls = this.id + '-selected'
    $(".btnSort").attr('class', 'btnSort');
    $(this).addClass(cls + ' selected');
});

http://jsfiddle.net/NLv5J/

answered Sep 24, 2012 at 2:31

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

Add / Remove specific class on click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related