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

1
votes

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?

2
jquery

2 Answers

2
votes

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, "."));
});
0
votes

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;
});