javascript - 如何使用 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'，有人可以帮忙吗？非常感谢。

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（这似乎没有意义）。

尝试：

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