JQueryを使用してナビバーの複数の画像を置き換える

Question

私はnavbarの事をhereの下に行っています。

基本的にユーザーが画像の上を移動すると、ファイル名がxyz.pngからxyz-hover.pngに変更され、新しい画像が表示されます。クールなフェードで。

例外を除いて、ホバーオーバーされたすべての画像は同じ画像に変化します。

誰もがこのことを知っていますか？

<script type="text/javascript"> 

$(document).ready(function() { 
     // Change the image of hoverable images 
     var openPng = $(".fadeim").attr("src"); 
     var closedPng = openPng.replace(".png", "-hover.png"); 


$(".fadeim").hover(function() { 
      $(this).stop(true, true).fadeOut(700, function() { 
        $(this).attr("src", closedPng).fadeIn(700); 
      }); 


     }, function() { 

      $(this).stop(true, true).fadeOut(700, function() { 
        $(this).attr("src", openPng).fadeIn(700);   
      }); 
     }); 
}); 


</script> 

Answer 1

変数openpngとclosepngをループ毎に定義する必要があります。

$(document).ready(function() { 
     // Change the image of hoverable images 

$(".fadeim").each(function(){ 
var openPng = $(this).attr("src"); 
var closedPng = openPng.replace(".png", "-hover.png"); 
$(this).hover(function() { 
      $(this).stop(true, true).fadeOut(700, function() { 
        $(this).attr("src", closedPng).fadeIn(700); 
      }); 


     }, function() { 

      $(this).stop(true, true).fadeOut(700, function() { 
        $(this).attr("src", openPng).fadeIn(700);   
      }); 
     }); 
}) 
});