變量不可見

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