使用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);   
      }); 
     }); 
}) 
});