Question

请不要立即将此标记为副本。我看过类似的问题，但仍然无法解决这个问题。

这就是我目前的情况：

$(document).ready(function(){
    for(var i=1;i<2;i++)
    {
        $("#MenuBarButton"+i).mouseover(function(){
            $("#ldheMenuBarLayer"+i).stop().animate({height:'66px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
        $("#MenuBarButton"+i).mouseout(function(){
            $("#ldheMenuBarLayer"+i).stop().animate({height:'41px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
    }
});

这不起作用。没有任何反应，控制台中没有任何内容。但是，如果我直接将i替换为每个1函数中的$，那就可以了。

我不是编程新手，但我是JavaScript的新手，所以我做了一些明显错误的事情吗？谢谢！

编辑：当我说我将i替换为1时，因为ID为MenuBarButton1和{{1} }。

Answer 1

您遇到的基本问题是i只有一个值。该变量只存在一次。事件处理程序内的代码指向变量，而不是创建事件处理程序时的值。所以请使用如下代码：

$("#ldheMenuBarLayer"+i).stop()...

每次运行事件处理程序时，i都将为2，因为我们已经完成整个循环。

您需要使用i的值，而不是对变量的引用。您可以通过引入具有匿名，立即调用函数的新范围来实现此目的：

for(var i=1;i<=2;i++)
{
    (function(j) {
        $("#MenuBarButton"+j).mouseover(function(){
            $("#ldheMenuBarLayer"+j).stop().animate({height:'66px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
        $("#MenuBarButton"+j).mouseout(function(){
            $("#ldheMenuBarLayer"+j).stop().animate({height:'41px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
    }(i))
}

撇开所有这一切，值得一提的是，这不是一种非常简洁的方式。 jQuery方式可能如下所示：

var menuBarButtons = $('.menuBarButton').mouseover(function() {
    var idx = menuBarButtons.index(this);

    $('.ldheMenuBarLayer')
        .eq(idx)
        .stop()
        .animate(
             {
                 height: '66px'
             },
             {
                 queue: false,
                 duration: 600,
                 easing: 'easeOutBounce'
             }
         );
});

此代码不起作用（可能）。它需要基于您的标记和页面结构。最终可能无法实现。

如何在JavaScript中连接变量和字符串？

1 个答案: