jquery替换响应式布局的图像

时间:2012-10-13 10:08:07

标签: jquery

在我的HTML页面中,每个尺寸都有3张图像,以匹配响应式布局。点击如何在img中单独替换名称?

示例:

 <img class="img-1024" src="images/photo-holder.jpg" />
 <img class="img-768" src="images/768/photo-holder.jpg" />
 <img class="img-320" src="images/320/photo-holder.jpg" />

如何改变?

 <img class="img-1024" src="images/new-holder.jpg" />
 <img class="img-768" src="images/768/new-holder.jpg" />
 <img class="img-320" src="images/320/new-holder.jpg" />

最简单的方法吗?

2 个答案:

答案 0 :(得分:1)

一个选项正在使用attr方法。

$('img').attr('src', function(i, c) {
    return c.replace('photo', 'new')
});

或:

$('img').click(function() {
    this.src = this.src.replace('photo', 'new')
})

http://jsfiddle.net/hHSQe/

答案 1 :(得分:1)

这样做: -

$(document).on("click", "img", function(){
    $(this).attr("src", function(i,v) { 
        return v.replace("photo","new");
    });
});​​

参考 LIVE DEMO