將變量傳遞給JQuery Waypoints

Question

我正在嘗試使用JQuery Waypoint來執行顏色更改標題。我有一個展示與他們相關的顏色的單頁網站的部分對象的數組（見下文）：

var colours = new Array(
    {section: 'home', colour: '#000'}, 
    {section: 'video-audio', colour: '#EF6E7C'}, 
    {section: 'motion-graphics', colour: '#FBC57A'}, 
    {section: 'graphic-design', colour: '#FFF9A9'}, 
    {section: 'web-development', colour: '#AAD693'}, 
    {section: 'social-media', colour: '#6D8DC9'}, 
    {section: 'photography', colour: '#8A6FB0'},  
    {section: 'talent', colour: '#C57AB3'},  
    {section: 'contact', colour: '#000'} 
); 

我然後使用下面的腳本來創建JQuery的航點爲每個部分（被標爲在HTML <section id="...">）：

// top bar whose background-colour is being changed 
var $topBar = $('.top-bar'); 

var offsetNum = 0, // pixels to offset waypoints 
    animateTime = 300, // milliseconds to animate 
    fallbackColour = '#333'; 

// len is number of sections (length of colours array) 
var len = (typeof colours == 'undefined') ? 0 : colours.length; 

if (len > 1) { 
    for (var i = 0; i < len; i++) { 
     var curColour = ('colour' in colours[i]) ? colours[i].colour : fallbackColour, 
      curSection = ('section' in colours[i]) ? colours[i].section : 'unknown'; 

     $('#' + curSection).waypoint(function(direction) { 
      if (i > 0 && i < len) { 
       curColour = (direction === 'down') ? 
        (colours[i+1].hasOwnProperty('colour') ? colours[i+1].colour : fallbackColour) : 
        (curColour = colours[i-1].hasOwnProperty('colour') ? colours[i-1].colour : fallbackColour); 
      } 

      // first or last waypoint 
      $topBar.stop().animate({backgroundColor: curColour}, animateTime); 
     }, { offset: offsetNum }); 
    } 
} 

當我剛手動創建用於每個部分的航點，而不是使用對象的數組和一個for循環，它的工作，但是這是大量的代碼的重複。如果稍後添加更多部分，我希望儘可能少地進行修改。

我與警報調試時發現，所有的航點看到i爲9（這將是最大的） - 是否有任何的方式來傳遞正確的i值到每個航點直接，還是有解決這個問題的更好方法？

Answer 1

在回調被調用的那一刻，變量i的值爲9（所有回調仍然與i具有相同的引用）。所以你應該通過實際的價值。例如：

for (var i = 0; i < len; i++) { 

    var curSection = ('section' in colours[i]) ? colours[i].section : 'unknown'; 

    addWaypoint(i, curSection); 
} 

function addWaypoint(n, curSection){ 

    // n now has the value 0, 1, 2, etc. instead of referencing i 

    $('#' + curSection).waypoint(function(direction) { 
     console.log(i, direction); // 0, "down" 
    });  
}