Изменить изображение по клику с помощью jQuery

0

Извините за неопределенное название, но я не совсем уверен, как это описать.

Я хочу сделать onclick, изменить изображение. Вот эта часть кода.

Может ли кто-нибудь сказать мне, возможно ли это? Я не вижу способа сделать это, потому что я не уверен, как ссылаться на тег привязки.

$(document.createElement('a'))
  .attr('href', '#')
  .html('<img src="myimage.jpg" />')
  .click( function( e ){
    // When the user clicks the anchor tag above, I want to replace the current
    // image (myimage.jpg) with another one.
  }
  • 0
    изменить атрибут src
  • 0
    Вы должны добавить его в DOM, чтобы сделать его даже кликабельным
Показать ещё 3 комментария
Теги:

5 ответов

1
Лучший ответ

Предполагая, что вы хотите сохранить состояние кода, в котором оно написано (что ужасно), e.currentTarget является ссылкой на элемент, который нажата. Вы можете использовать это, чтобы повторить вашу (обескураженную .html() процедуру .html() с другим URL-адресом изображения.

$(document.createElement('a'))
    .attr('href', '#')
    .html('<img src="myimage.jpg" />')
    .click( function( e ){
        $(e.currentTarget).html('<img src="myimage2.jpg" />');
    });
Поделиться
  • 0
    Спасибо, Брайан. Я был близко. Я действительно новичок в DOM и, просматривая его, я заметил это и решил, что смогу его использовать. Я все делал неправильно, теперь, когда я вижу, как ты это делаешь.
1 
//create node
$('<a>', {
   'href': '#',
   'src': 'myimage.jpg'
})

//add it to the body
.appendTo('body')

//add envent
.on('click', function(){
   $(this).attr('src', 'otherimage.jpg');

   //prevent to jump to the top of the page caused by the '#'
   return false;
});
Поделиться
  • 0
    Это хорошая идея. Мне это нравится. Я тоже собираюсь попробовать. Спасибо тебе за это
1

Используйте этот простой

$('img').click(function () {
 $(this).attr('src', 'src/to/new/file.png');
}

Если вы хотите изменить изображение, когда щелчок находится над a. Затем используйте

$('a').click( function () {

вместо изображения один.

Это изменит атрибут src текущего изображения.

Вот для этого скрипка:

http://jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/

Когда вы наводите курсор мыши на изображение, вы увидите, что он изменится. Вы можете использовать click вместо hover. Это должно сработать. И не создавайте a если вам нужно отключить его, используя href="#".

Если вы хотите, чтобы курсор указателя использовал cursor: pointer в CSS или использовать

$(this).css('cursor', 'pointer');
Поделиться
1 
$(document.createElement('a'))
  .attr('href', '#')
  .html('<img src="myimage.jpg" />')
  .click( function( e ){
      $(this).find('img').attr('src','myNewImage.jpg');
  });
}
Поделиться
1

Самый простой способ - просто дать образ классу, например, "myImg", и использовать метод .on() для привязки к динамически созданным элементам

$(document).on('click', '.myImg', function(){
    //$(this) refers to the image that we clicked
    $(this).prop('src', 'http://my-domain.com/path/to/my/new-image.jpg');
});

Это связывает событие с документом, и в любое время, когда щелкнут изображение с классом "myImg", оно заменит изображение.

Поделиться
  • 0
    Спасибо, Боже. Почему? Сейчас попробую

Ещё вопросы

Сообщество Overcoder
Наверх
Меню