javascript - jQueryでクリック時に画像を変更

Question

あいまいなタイトルで申し訳ありませんが、これをどのように説明すればよいかわかりません。

私がやりたいのは、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.
  }

Answer 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」クラスの画像がクリックされるたびに、画像が置き換えられます。

Answer 2

$(document.createElement('a'))
  .attr('href', '#')
  .html('<img src="myimage.jpg" />')
  .click( function( e ){
      $(this).find('img').attr('src','myNewImage.jpg');
  });
}

Answer 3

//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;
});