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

Answer 1

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