在我的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" />
最简单的方法吗?
答案 0 :(得分:1)
一个短选项正在使用attr
方法。
$('img').attr('src', function(i, c) {
return c.replace('photo', 'new')
});
或:
$('img').click(function() {
this.src = this.src.replace('photo', 'new')
})
答案 1 :(得分:1)
这样做: -
$(document).on("click", "img", function(){
$(this).attr("src", function(i,v) {
return v.replace("photo","new");
});
});
参考 LIVE DEMO