变量看不到答案

【问题标题】：Variable can't been seen变量看不到
【发布时间】：2012-08-16 15:19:56
【问题描述】：

抱歉，这可能是一个简单的问题。我正在尝试使用 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”变量。我已经通过插入我自己的变量对其进行了测试，它可以工作。

有什么建议吗？

谢谢。

【问题讨论】：

能不能详细说明一下“看不到”？
如果将for 语句更改为for(var i=0; i<=4; i++) 会怎样？
在i 前面添加var 否则你只会得到最后一个值，因为你的变量是全局变量
变量看不到。听起来像是惠普的工作。洛夫克拉夫特。
@jli as in 不能被 $('#nav li:eq('+i+')').css('color', '#ff3520');部分。但是，它可以通过 $('#nav a:eq('+i+')').hover(function()...

标签： javascript jquery closures

【解决方案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 进行循环，因为它为每个数组索引调用函数。

【讨论】：

完美。谢谢，我认为这是一个范围问题，但我认为我自己把事情复杂化了。

【解决方案2】：

已经解释了您的代码存在什么问题（i 的范围）并提供了解决方案。也看看这个相关的问题：JavaScript closure inside loops – simple practical example。

但是你可以用不同的方式解决它，根本不使用索引，而是使用 DOM 遍历，以更加面向 jQuery 的方式。我假设您的 HTML 看起来与此类似：

<ul id="#nav">
    <li><a>...</a></li>
    <li><a>...</a></li>
</ul>

即a 元素是您要更改的 li 的后代。

然后您可以使用以下代码实现相同的目的：

function testIndex(navIndex){
    $('#nav a').slice(0,5).not(function(i) { 
        return i === navIndex;
    }).hover(function(){
        $(this).fadeTo('fast', 0.3, function(){
            $(this).css('background-color','#ff3520')
              .closest('li').css('color', '#ffffff');
         }).fadeTo('fast', 1);
    }, function(){
        $(this).fadeTo('fast', 0.3, function(){
            $(this).css('background-color', '#e8e8e8');
              .closest('li').css('color', '#ff3520');
        }).fadeTo('fast', 1);
    });
}

【讨论】：