Question

我在Jquery

中创建了以下函数

function menuItem(x,i) {
var imgALT = $(x).text();   
$(x).mouseover(function()
{
    $(x).parent().parent().parent().children("img").attr("src", "menu/menu"+i+".jpg");
    $(x).parent().parent().parent().children("img").attr("alt", imgALT);
    $(x).parent().children("span").css("color", "#FFFFFF");
    $(x).css("color", "#CA0109");
});
};

我使用以下内容触发它：

<span onmouseover="menuItem(this,'09-01')">月亮蝦餅 (2份)</span>

它完全按照我的意图工作，但只有在我第二次将鼠标悬停在跨度之后，而不是第一次。我想这可能是某种负载问题？我应该如何确保它在第一次鼠标悬停以及后续事件时触发？

非常感谢！

Answer 1

问题是，只有在您悬停在元素上并且内联onmouseover被触发后，才使用jQuery绑定事件。

由于onmouseover事件看起来对您的应用程序结构至关重要，因此请将您的JavaScript更改为以下内容：

function menuItem(x,i) {
    var $x = $(x);
    var imgALT = $x.text();

    $x.parent().parent().parent().children("img").attr("src", "menu/menu"+i+".jpg");
    $x.parent().parent().parent().children("img").attr("alt", imgALT);
    $x.parent().children("span").css("color", "#FFFFFF");
    $x.css("color", "#CA0109");
}

理想情况下，我会使用data-属性：

<强> HTML ：

<span data-image="09-01">月亮蝦餅 (2份)</span>

<强>的JavaScript ：

$(document).ready(function() {
    $('span[data-image]').mouseover(function() {
        var $this = $(this);
        var $images = $this.parent().parent().parent().children("img");

        $images.attr("src", "menu/menu" + $this.data('image') + ".jpg");
        $images.attr("alt", $this.text());

        $this.siblings("span").css("color", "#FFFFFF");
        $this.css("color", "#CA0109");
    });
});

Answer 2

使用document.ready功能

$(document).ready(function(){
  $('span').mouseover(function(){});
    });

Jquery mouseover在第二个事件上触发

2 个答案: