javascript - 看不到变量

Question

抱歉，这可能是一个简单的问题。我正在尝试使用 jQuery 构建我的第一个导航。这个想法是，只要悬停按钮，背景颜色和文本颜色就会改变，只要它不是“已选择”按钮。除了文字颜色外，我的所有这些工作正常。与在 jQuery 中一样，它看不到我的循环变量:

function testIndex(navIndex){
        for(i=0; i<=4; i++){
            if(i != navIndex){
                $('#nav a:eq('+i+')').hover(function(){
                    $(this).fadeTo('fast', 0.3, function(){
                        $(this).css('background-color','#ff3520');
                        $('#nav li:eq('+i+')').css('color', '#ffffff');
                    }).fadeTo('fast', 1);
                },
                function(){
                    $(this).fadeTo('fast', 0.3, function(){
                        $(this).css('background-color', '#e8e8e8');
                        $('#nav li:eq('+i+')').css('color', '#ff3520');
                    }).fadeTo('fast', 1);
                });
            };  
        };
    };

在

$('#nav li:eq('+i+')').css('color', '#ff3520');

无法看到“i”变量。我已经通过插入我自己的变量对其进行了测试并且它有效。

有什么建议吗？

谢谢。

Answer 1

因为您处于循环中，所以需要一个变量范围来保持对处理程序中 i 的引用。

function testIndex(navIndex){
    $.each(Array(5), function(i) {
        if(i != navIndex){
            $('#nav a:eq('+i+')').hover(function(){
                $(this).fadeTo('fast', 0.3, function(){
                    $(this).css('background-color','#ff3520');
                    $('#nav li:eq('+i+')').css('color', '#ffffff');
                }).fadeTo('fast', 1);
            },
            function(){
                $(this).fadeTo('fast', 0.3, function(){
                    $(this).css('background-color', '#e8e8e8');
                    $('#nav li:eq('+i+')').css('color', '#ff3520');
                }).fadeTo('fast', 1);
            });
        }
    });
}

在 JavaScript 中，调用一个函数会产生一个变量范围，所以我在循环中使用了 $.each，因为它会为每个数组索引调用该函数。