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");
            }
        )
    }
});

P.S。以下代码正在运行。因为不仅有一个集合，我应该使用循环“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')已被弃用。

此外，您不能在i循环中使用for并在以后使用它的值而不使用闭包。

在事件发生时，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");
    });
});

为什么第一个事件“悬停”不起作用？

1 个答案: