CODEWITHSUNDEEP
jquerycss
Filth
Filth

Reputation: 3228

Add / Remove specific class on click

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".

Upvotes: 2

Views: 96

Answers (2)

prodigitalson
prodigitalson

Reputation: 60413

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

Upvotes: 3

Ram
Ram

Reputation: 144659

Try this:

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

http://jsfiddle.net/NLv5J/

Upvotes: 3

Related Questions