变量不可见

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'); 

“我”变量不能被看到。我已经通过插入我自己的变量来测试它，并且它可以工作。

有什么建议吗？

谢谢。

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为循环的，因为它要求每个数组索引的功能。

Answer 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); 
    }); 
}