How to change one portion of img src of images with particular class in jQuery?

Question

Basically trying to do the following:

I have three colors: Blue, Green and Red

I have a set of images that should load based on the color link selected. All the images are the exact same in format, except for the color:

Blue: img1.blue.jpg, img2.blue.jpg. img3.blue.jpg Green: img1.green.jpg, img2.green.jpg, img3.green.jpg

I know to split the src by ".", but how can I change the color portion for all the images that have a particular class?

Answer 1

I think it's something like this:

$(".MYCLASSNAME").each(function(i){
    var ar = i.attr("src").split(".");
    ar[1] = newColor; // red, green, or blue
    i.attr("src", join(ar, "."));
});

Answer 2

Something like this? You have links like this

<a href='#' customColor='blue' class='colorChangeLink'>Blue</a>

and images like this:

<img src='img1.red.jpg' class='imgChangeColor'>
<img src='img2.red.jpg' class='imgChangeColor'>

Which will then change the images color.

$('.colorChangeLink').click( function() {
 var color = $(this).attr('customColor');
 $('.imgChangeColor').each( function(i) {
   //Note, this is pretty much Ithi's answer from here on.
  var arr = i.attr('src').split('.');
  arr[1] = color;
  i.attr('src', join(arr, '.'));
 });
 return false;
});