如何在jQuery中使用特定类更改图像的img src的一部分？

Question

基本上尝试执行以下操作：

我有三种颜色：蓝色，绿色和红色

我有一组图像应根据所选的颜色链接加载。除了颜色外，所有图像的格式完全相同：

蓝色：img1.blue.jpg，img2.blue.jpg。 img3.blue.jpg 绿色：img1.green.jpg，img2.green.jpg，img3.green.jpg

我知道将src拆分为“。”，但是如何更改具有特定类的所有图像的颜色部分？

Answer 1

我认为是这样的：

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

Answer 2

这样的东西？你有像这样的链接

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

和这样的图像：

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

然后会改变图像的颜色。

$('.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;
});