Как изменить источник изображения на клике?

Question

Хорошо, у меня есть div, который содержит изображение,

<div id="image">
<img src="images/medium/1.png" />
</div>

Теперь я хочу изменить src на images / medium / 2.png, когда нажимаю на ссылку с помощью jQuery.

Я искал, но не смог его найти, поэтому и спрашиваю здесь. Я новичок в jQuery, поэтому буду признателен, если вы все очень хорошо объясните.

Answer 1

$('a.imageChanger').click(function()
{
    $('#image img').attr('src','newImage.png');
}

Это, вероятно, сделает свое дело, но я не уверен, что это хороший способ сделать это, потому что текстура должна быть загружена снова. Большую часть времени вы будете переключаться между двумя изображениями, которые уже находятся в вашем div. Установите один для видимого и один для скрытого в методе щелчка.

Пример

<a href="somelink" class="imageChanger">Click here</a>

<div id="image">
    <img class="currentImage">
    <img class="hiddenImage">
</div>

JavaScript:

// toggle both classes that display or hide an image.
$('a.imageChanger').click(function()
{
    $('#image img')each(function()
    {
        $(this).toggleClass('currentImage');
        $(this).toggleClass('hiddenImage');
    });
});

Этот скрипт работает только с 2 изображениями, а не с 3 и более. Но уже есть много плагинов для ротатора.
И CSS:

.hiddenImage
{
    display:none;
}

.currentImage
{

}

Я не тестировал этот код, но он будет выглядеть примерно так. Это просто концепция.

Answer 2

$("LINK SELECTOR GOES HERE").click(function(){
    $("#image img").attr("src","images/medium/2.png");
});

Но если вы действительно собираетесь сделать это только один раз, вы можете использовать

http://api.jquery.com/one/

Answer 3

$("#image img").attr("src", "images/medium/2.png") должен сделать свое дело.Он выбирает элемент img внутри элемента с id "изображением", затем изменяет атрибут src.

Вы можете запустить это в обработчике событий click вашей ссылки следующим образом:

$("#linkId").click(function() {
    $("#image img").attr("src", "images/medium/2.png");
});

Answer 4

$('#image').click(function(){ // Or whatever element you want to click on
  $('img', '#image').attr('src', 'images/medium/2.png'); // Change the src
});