Question

如何在单击span元素

的同时使用新图像路径重写以下img标记的图像路径

<span id="cc-element-1">
    <img src="http://localhost/example/orig/abc.jpg"/>
</span>

预期结果如下，

<span id="cc-element-1">
    <img src="http://localhost/example/cloned/abc.jpg"/>
</span>

Answer 1

$('#cc-element-1').click(function() {
    var $img = $(this).children('img');
    $img.attr('src', $img.attr('src').replace(/orig/, 'cloned'));
});

Answer 2

如果对属性进行读取 - 修改 - 写入，则应使用基于.attr的{{1}}版本而不是@Sahil给出的代码：

$('#cc-element-1').click(function() {
    var $img = $(this).children('img');
    $img.attr('src', function(index, val) {
        return val.replace(/orig/, 'cloned'));
    });
});

这样就无需调用$img.attr(src)两次 - 一次读取，一次写入。

因此效率更高，特别是如果原始选择器非常重要的话。

Answer 3

$("#cc-element-1 > img").click(function() {$(this).attr('src', 'http://localhost/example/cloned/abc.jpg')})

Answer 4

尝试这样的事情：

var newSrc = 'http://localhost/example/cloned/abc.jpg';

$('span#cc-element-1').click(function(){
     $(this).children('img').attr('src', newSrc);   
});

请参阅此处的示例：

http://jsfiddle.net/expertCode/FdgzJ/

如何使用JQuery用新的图像路径重写内部img标签源

4 个答案: