我写了这段代码,但是没有用:

JavaScript:

$(function() {
    var menu_h_number=5

    for (i=1; i<=menu_h_number; i++)
    {
        $(".web_header_mb_"+i).show(1000);

        $(".web_header_mb_"+i).css("background", "#FF0000");

        $(".web_header_mb_"+i).hover(function ()
        {
            $(".web_header_mb_"+i).css("width", "200");
        });

        $(".web_header_mb_"+i).mouseout(function ()
        {
            $(".web_header_mb_"+i).css("width", "300");
        });
    }
});


HTML:

<div id="menu" class="web_header_mb_1"></div>
<div id="menu" class="web_header_mb_2"></div>
<div id="menu" class="web_header_mb_3"></div>
<div id="menu" class="web_header_mb_4"></div>
<div id="menu" class="web_header_mb_5"></div>


开始时,气泡中显示不同的id,但是当我执行mouseover时,大小没有变化。

最佳答案

为什么它不起作用

您的代码无法正常工作的原因是:

对于立即执行的代码(例如ishow调用),hover具有正确的值。但是,由于JavaScript的工作方式,这不适用于回调(例如您提供给hover的回调)。在提供回调时,JavaScript会记住该变量,而不是该变量的值。循环完成后才会调用回调。这就是为什么在回调i中始终为5的原因,因为这是i的最后一个值。

您可以在此处阅读有关此内容的更多信息:Closures (MDN)

另外,请注意id必须是唯一的。您不能将id“菜单”赋予五个不同的元素;这就是课程的目的。换句话说:您的代码中有idclass后退。

如何运作

规避闭包“问题”的最简单方法是在回调函数中使用$(this)。在jQuery中,回调函数内的this关键字始终指向触发事件的对象。通过使用$(this),您将拥有正确的jQuery对象,而不必大惊小怪:

for (i=1; i<=menu_h_number; i++)
{
    var currentItem = $(".web_header_mb_" + i);

    currentItem
        .show(1000)
        .css("background", "#FF0000");
        .hover(
            function() { // mouseenter
                $(this).css("width", 200);    // <--
            },
            function() { // mouseleave
                $(this).css("width", 300);    // <--
            });
}


我在上面的代码中所做的另一件事是将jQuery对象缓冲在局部变量(currentItem)中。这使您的代码更快,因为您只需要查找一次元素(在这种情况下,不是6次)。您应该尽可能这样做。

同样,如您所见,hover function不仅仅用于mouseover事件。您可以为其提供回调,以同时处理mouseovermouseout

正如其他人已经建议的那样,您可以做的另一件事是使用单个类而不是5个不同的类。如果查询与多个对象匹配,则jQuery函数($())实际上将返回一个集合。

因此,给出以下HTML:

<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>


您可以使用each(),如下所示:

$(".menu.web_header_mb").each(function() {
    $(this)
        .show(1000)
        .css("background", "#FF0000");
        .hover(
            function() { // mouseenter
                $(this).css("width", 200);
            },
            function() { // mouseleave
                $(this).css("width", 300);
            });
});


甚至这个:

$(".menu.web_header_mb").
    .show(1000)
    .css("background", "#FF0000");
    .hover(
        function() { // mouseenter
            $(this).css("width", 200);
        },
        function() { // mouseleave
            $(this).css("width", 300);
        });


最后一个有效的原因是show()css()hover()都适用于jQuery集合(以及单个jQuery对象)。整洁吧?

10-05 20:43
查看更多