Изменение img src при нажатии на любое изображение в div

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

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

Answer 2

Ваш селектор img возвращает каждое изображение на странице, а не то, на котором была нажата кнопка.

Попробуйте это:

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

Пример скрипки

EDIT

OP переопределил вопрос, чтобы «нажать на родителя, и все изображения должны измениться»:

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

Новый пример скрипки

Answer 3

Одной из проблем является порядок замены ваших параметров - он должен быть

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

Answer 4

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

Вам не повезло, когда файл называется help.me.png

Answer 5

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