单击div中的任何图像时更改img src

Question

我的div包含以下图片和

<div class="div1">
    <img src="images/pic1.png">
    <img src="images/pic2.png">
    <img src="images/pic3.png">
</div>

当我点击任何图片时，图片路径应更改为images/pic1-h.png

这是我在jQuery中尝试过的，但它不起作用

$(".div1").click(function(){
    var r1 = $("img").attr("src").replace(".", ".-h");
    $('img').attr("src", r1);
});

Answer 1

您的img选择器正在返回页面上的每个图像，而不是单击的图像。

试试这个：

$(".div1 img").click(function() {
    var r1 = $(this).attr("src").replace(".", "-h.");
    $(this).attr("src", r1);
});

Example fiddle

修改

OP将问题重新定义为＆＃39;点击父级，所有图片都应更改＆＃39;：

$(".div1").click(function() {
    $("IMG", $(this)).each(function() {
        var src = $(this).attr("src").replace(".", "-h.");
        $(this).attr("src", src);
    });
});

<强> New Example fiddle

Answer 2

$(".div1 img").click(function(){    
    $(this).attr("src", $(this).attr("src").replace('.','-h.'));
});

Answer 3

一个问题是你的参数的顺序 - 它应该是

replace(".","-h.")

Answer 4

$(".div1 img").click(function(){
    var r1 = $(this).attr("src").replace(".","-h.")
    $(this).attr("src", r1);
});

Answer 5

$(".div1").click(function(){
    var $img = $('img', this);
    var r1 = $img.attr("src").replace(".", "-h.");
    $img.attr("src", r1);
});

当文件被调用help.me.png

时，你运气不好