Question

I’m trying to create a simple theme system here. I have few elements with red background color. I also have a button that will change the elements background color to green.

I’m trying to code but I couldn’t figure out how can I select and change the bg color of all red elements to green!

For example, I have 4 divs. Two of these have a red header, and when I click the button these headers background color must be changed to green. It’s Ok here, but the problem is that the divs are dynamically generated, so do I have do loop all the page to find the red bg color? Could someone enlight me? =)

Thanks a lot! =)

Answer 1

I think the best solution would be to use different stylesheet for each theme and keep the current theme value in SESSION or COOKIE or just pass it as URL argument. But that would be a server side solution.
On Client side, you can just use different classes for each theme and toggle them on the button push event using .toggleClass()

$('.green').toggleClass('red green');