Как dynamiclly источник изменения файла с JQuery

Question

У меня есть некоторые IMG с каким-либо источником:

<img src="data/model/images/color_01/h_1.png" class="current-image"> 

мне нужно изменить свою исходную часть после некоторого щелчка действия

var color_image = $('.current-image') 

color_image.on('click',function(){ 
    var image_src_color = color_image.attr('src').split('/')[3]; 
    color_image.attr('src', $(this).replace(image_src_color, 'color_02')); 
}); 

что-то не правильно Ьса я есть консольное оповещение Object [object Object] has no method 'replace', может ли кто-нибудь помочь? Много thx.

Answer 1

Попробуйте это с помощью .attr(attributeName, function(index, attr)):

color_image.on('click', function() { 
    var image_src_color = color_image.attr('src').split('/')[3]; 
    color_image.attr('src', function (i, val) { 
     return val.replace(image_src_color, 'color_02'); 
    }); 
}); 

Answer 2

$(this) должен быть $(this).attr('src')

Answer 3

Ну, вы пытаетесь заменить что-то на объект JQuery ($(this)), а не URL. Объекты jQuery не имеют метода .replace, строки делают. Вы также обращаетесь к неправильному элементу (я полагаю), если вы не всегда хотите работать с URL-адресом первого изображения (что, похоже, не имеет смысла).

Try:

color_image.on('click',function(){ 
    $(this).attr('src', function(i, src) { 
     return src.replace(src.split('/')[3], 'color_02'); 
    }); 
});