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

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

这行不通。没有任何反应，控制台中也没有出现任何内容。但是，如果我在每个$ 函数中直接用1 替换i，它就可以工作。

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

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

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 式的处理方式。 jQuery 方式可能如下所示：

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

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

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