2015-07-19 236 views
1

网站链接: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"); 
    } 
) 

回答

0

的jQuery bindon()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"); 
    }); 
}); 
+0

谢谢charlietfl!它成功了! – user3037271