1

私の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" />

これを行うための最短の方法はありますか？

4

2 に答える 2

1

短いオプションの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/

于 2012-10-13T10:10:25.183 に答える
1

このようにしてください：-

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

ライブデモを参照

于 2012-10-13T10:20:08.227 に答える