jquery - 画像とホバーイベントを動的に追加

Question

ホバー機能を使って画像を動的に追加する方法を見つけようとしています。ありがとう 。

<ul id="imagesList">
  <li>No images found</li>
</ul>

$(function(){
            //load image array
            var images = {'image1':'assets/img/linkedin_30px.png','image2':'assets/img/twitter_30px.png'};
            $.each(images, function(){
               ....?
            });
        });

Answer 1

イベントの委任を調べてください。そうすれば、イベントハンドラーを一箇所で評価し、domnodeの変更に対応させることができます。あなたの場合、次のようになります。

$('#imagesList').on('hover', 'img', function(){
    // your hover event handler here
});

次に、イメージノードを作成できます。

$('#imagesList').html('');
var images = {'image1':'assets/img/linkedin_30px.png','image2':'assets/img/twitter_30px.png'};
$.each(images, function(i, src){
    $('#imagesList').append('<li><img src="'+src+'"></li>');
});

これがデモです：http：//jsfiddle.net/pwGQX/

Answer 2

詳細が必要ですが、すぐにjQueryの.hoverイベントを使用できます。

    $("#imagesList").hover(
      // prepend the image on hover
      function() {
          $( this ).prepend( $( "<span><img src='image-x.jpg'></span>" ) );
        },
      // Remove the image when mouse leaves
        function() {
          $( this ).find( "span:first" ).remove();
      }
    );