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

克隆克斯

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

这是我目前所拥有的：

$(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用a替换时1，这是因为ID为MenuBarButton1and ldheMenuBarLayer1。

寂寞的一天

您遇到的基本问题是永远只有一个价值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'
             }
         );
});

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。