1

请不要立即将此标记为重复。我看过类似的问题，但仍然无法弄清楚。

这是我目前拥有的：

$(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用 a替换它就可以了。1$

我对编程并不陌生，但我对 JavaScript 很陌生，所以我做的事情显然是错误的吗？谢谢！

编辑：当我说我i用 a替换时1，那是因为 ID 是MenuBarButton1and ldheMenuBarLayer1。

4

1 回答 1

2

您遇到的基本问题是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 式的处理方式。jQuery 方式可能如下所示：

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

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

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

于 2013-10-30T14:06:39.820 回答