JQuery'de belirli bir sınıftaki img kaynaklarının bir bölümünü nasıl değiştirebilirim?

Question

Temelde aşağıdaki yapmaya çalışıyor: Mavi, Yeşil ve Kırmızı

seçtiğim renk bağlantısının dayalı olarak yüklenebilir gereken görüntülerin bir dizi var:

Üç renkler vardır. Tüm görüntüler, şu renkler hariç, aynıdır:

Mavi: img1.blue.jpg, img2.blue.jpg. img3.blue.jpg Yeşil: img1.green.jpg, img2.green.jpg, img3.green.jpg

Src'yi "." ile ayırmayı biliyorum, ancak renk bölümünü nasıl değiştirebilirim? Belirli bir sınıfa sahip olan görüntüler Böyle

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

Answer 1

Ben böyle bir şey olabilir mi? Sonra görüntüleri rengi değişir

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

: Böyle bu

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

ve resim gibi bağlantıları var.

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

Answer 2

şey: