爲什麼第一個事件「懸停」不起作用？

Question

網站鏈接：http://oddo.lndemo.taki.com.tw/oddokitchen/maptest.html

當懸停「臺北」時，圖像應該改變。 我不知道爲什麼第一個事件「懸停」不起作用。 但再次事件「懸停」正在工作。

這是我的jQuery代碼：

$(document).ready(function() { 
    //map hover 
    var i 
    for (i = 0; i <= 1; i++) { 
     $("#Map area:eq(" + i + ")").bind("hover", { 
      id: i 
     }, mapFn) 
    } 

    function mapFn(e) { 
     $("#Map area:eq(" + e.data.id + ")").hover(
      function(){ 
       $(".twmapimg").attr("src","images/th" + e.data.id + ".png"); 
      }, 
      function(){ 
       $(".twmapimg").attr("src","images/twmap.png"); 
      } 
     ) 
    } 
}); 

附：以下代碼正在工作。因爲不僅有一套，我應該使用循環「for」。

$("#Map area:eq(0)").hover(
    function(){ 

     $(".twmapimg").attr("src","images/th1.png"); 
    }, 
    function(){ 
     $(".twmapimg").attr("src","images/twmap.png"); 
    } 
) 

Answer 1

的jQuery bind爲on()和on('hover')別名已棄用。

另外，您不能在for循環中使用i，並且在稍後使用它的值而不使用閉包。

事件發生時，i將達到最大值。

您可以使用each()創建閉包，或者您可以在事件處理程序中獲取索引。

繼將取代問題中的所有代碼：

$(function(){  
    $('#Map area').hover(function() { 
     var index = $(this).index(); 
     $(".twmapimg").attr("src", "images/th" + index + ".png"); 
    },function() { 
     $(".twmapimg").attr("src", "images/twmap.png"); 
    }); 
});