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

該代碼將無法正常工作（可能）。 它需要基於您的標記和頁面結構。 最終可能無法實現。