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

Question

网络 link：http://oddo.lndemo.taki.com.tw/oddokitchen/maptest.html

鼠标悬停在“台北”时，图片应该会发生变化。我不知道为什么第一个事件 "hover" 不起作用。但是再次事件 "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");
            }
        )
    }
});

p.s。以下代码正在运行。因为不止一组，所以我应该用loop "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");
    });
});

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

Why the first event "hover" not working?

jquery

loops

for-loop

hover