replaceClass
replaceClass
Hey all,<div>
</div><div>I'm working on a site that offers some customizability regarding elements colors (background & font). Rather then setting the color with .css(), I use classes like color-red, color-green, etc (and of course, red is not the css "red" and green is not the css "green"). I find it much cleaner since I need not have color values referenced within javascript or php (it's simply in the css).</div>
<div>
</div><div>However, the code seems unnecessarily bloated for switching classes. What would be very useful imo, is to have hasClass accept regexp & return the array of found classes and also a .replaceClass() function that would change a class into another. That way I could do the following:</div>
<div>
</div><div>var colorClasses = $.hasClass(/color-.+/);</div><div>if (colorClasses!==false) {</div><div> var currentColorClass = colorClasses[0];</div><div>}</div><div>// Do stuff with the color class</div><div>$.replaceClass(currentColorClass,"color-"+newColor);</div>
<div>
</div><div>As of today, I have only two solutions:</div><div>- keep the current color using $.data() or any other custom data container</div><div>- OR search the class attribute by hand (hoping classes are in a specific order, you can imagine the mess)</div>
<div>
</div><div>If that wasn't bad enough, after that, to replace the class, I have to call $.removeClass() and $.addClass() which seems pretty inefficient to me.</div><div>
</div><div>I know I could probably do a plugin for that but I have the feeling that, if embedded in jQuery with its class related code, it would be much more efficient.</div>
<div>
</div><div>I also know I could switch back to the .css("background-color",color) but it kinda defeats the purpose of having the presentation information in the css and ONLY in the css which I find pretty nice for maintenance.</div>
<div>
</div><div>Yes, and finally, am I crazy or couldn't this be quite useful?</div><div>
</div><div>Take care, all,</div><div>
</div><div>-- Julian</div><div>
</div><div>
</div><div>
</div><div>
</div><div>
</div>