javascript - 如何在 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'})
        });
    }
});

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

我不是编程新手，但我是 JavaScript 新手，所以我做错了什么吗？谢谢!

编辑 当我说我将 i 替换为 1 时，那是因为 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'
             }
         );
});

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