Display related images based on text name

Question

Instead of "Black and Green" text, We are displaying "Black & Green" images with help of below code.

enter image description here

What we want is this concept should work for all colors, for that one solution is i need to write manual code for hundreds of colors as like below to make it work for all colors. but i think this is wrong way , may be it may impact on performance, is there any better way to handle this ?

Script :

var jQuery = $.noConflict();
jQuery(document).ready(function(){
 var inner = Array();
 inner = jQuery(" .product-options ul.options-list .label>label");
 for (i=0;i<inner.length;i++){
 var classN = inner[i].innerText;
 if (classN=="Black" || classN=="Green"){
 inner.eq(i).addClass(classN);
 }
 }
});

Css for green :

.product-options ul.options-list .label>label.Green
{ 
 font-weight: normal; 
 width: 50px; 
 height: 50px; 
 border-radius: 50%; 
 background-image: url("http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png") !important; 
 background-size: cover !important; 
 display: block; 
 color: transparent; 
 padding: 0 !important; 
 font-size: 0; 
}

Css for black :

.product-options ul.options-list .label>label.Black
{ 
 font-weight: normal; 
 width: 50px; 
 height: 50px; 
 border-radius: 50%; 
 background-image: url("http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png") !important; 
 background-size: cover !important; 
 display: block; 
 color: transparent; 
 padding: 0 !important; 
 font-size: 0; 
}

Answer 1

A few thoughts come to mind here:

• You are not properly using inheritance in your CSS. You should probably have one definition for .product-options ul.options-list .label>label which contains every single CSS declaration except for the actual background image. As these will not change. Then just have definitions for .product-options ul.options-list .label>label.* (where * is green, black, etc.) that are one line each (specifying background-image), as that is the only part that changes based on color.
• You might consider not using images at all in favor of pure CSS. This could actually give the benefit of potentially not having to declare per-color CSS styles at all, in favor of just changing the background color value on the elements to one of the valid CSS named colors. Here are CSS-only examples for different shapes. This would actually perform better as there would be no images to download at all.
• Your variable names are not very meaningful. For example inner might better be called labels or similar (or $labels if you use the convention of pre-pending jQuery collections with $). Perhaps color instead of classN.
• You might need to give up hope of individually checking each label element text as being one of allowed color values. Or look to solutions like these to provide validation that the color names are good.
• Since you are working against a jQuery collection, you might consider using $.each() as your iterator rather than a for loop.

Combining these approaches might mean you can simplify your code down to:

var jQuery = $.noConflict();
jQuery(document).ready(function(){
 var $labels = jQuery(" .product-options ul.options-list .label>label");
 $labels.each(function() {
 var color = $(this).text();
 // perhaps validate color here as noted above in link
 if(colorIsValid(color)) {
 $(this).css('background', color);
 } else {
 throw new RangeError('Unexpected color value.');
 }
 }
});