jQuery 2-й щелчок для вызова функции

Question

У меня есть следующий HTML

<a onclick="hi('#i_15', 'second_img.jpg'); return false;" href="http://google.com">
<img id="i_15" src="first_img.jpg" />
</a>

Итак, я не хочу, чтобы он переходил на google.com при нажатии, а вместо этого просто вызываю функцию hi:

function hi(id, file){
$(id).attr("src", file);
}

Это должно увеличить изображение (путем переключения first_img.jpg на second_img.jpg.) Что я могу сделать, если я хочу снова заменить его?Например, нажмите на поменявшееся изображение (second_img.jpg) и измените его на first_img.jpg;обращение того, что делает функция hi.

Answer 1

Что касается отказа от перехода на google.com при нажатии, вы можете просто изменить href на: href="#".

Для обмена изображениями, почему бы не заставить вашу функцию hi работать в обоих направлениях, как переключатель? Вы могли бы сделать это:

<a onclick="swapImage('#i_15', 'first_img.jpg', 'second_img.jpg');" href="#" >
    <img id="i_15" src="first_img.jpg" />
</a>

function swapImage(id, firstImage, secondImage) {
    var imageToLoad = $(id).attr("src") == firstImage ? secondImage : firstImage;

    $(id).attr("src", imageToLoad);
}

Answer 2

Как-то так в вашей функции hi() должно работать.

function hi(id, file){
    var $id = $(id);
    if($id.attr("src") == file)
    {
        $id.attr("src", $.data($id, "orig"));
    }
    else
    {
        $.data($id, "orig", $id.attr("src"));
        $id.attr("src", file);
    }
}