为什么第一个事件"hover"不起作用？

Question

网址:http://oddo.lndemo.taki.com.tw/oddokitchen/maptest.html

当鼠标悬停"桌面"时，应该更改图像。我不知道为什么第一个事件"悬停"不工作。但是事件"hover"正在工作。

这是我的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");
    });
});