Javascript 将变量传递给JQuery航路点

我正在尝试使用JQuery航路点来更改标题的颜色。我有一系列的对象，用它们的相关颜色显示一页网站的各个部分（见下文）：

然后，我使用下面的脚本为每个部分创建JQuery航路点（在HTML中标记为

）：

//正在更改背景颜色的顶栏
变量$topBar=$（'.top bar'）；
var offsetNum=0，//偏移航路点的像素数
animateTime=300，//要设置动画的毫秒数
FallbackColor='#333'；
//len是节数（颜色数组的长度）
变量len=（颜色类型=‘未定义’）？0：颜色。长度；
如果（len>1）{
对于（变量i=0；i0&&i

当我只是为每个区段手动创建航路点，而不是使用对象数组和for循环时，它起了作用，但这是大量代码重复。如果以后添加更多的节，我希望尽可能少地进行修改

---

我在调试警报时发现，所有航路点都将

I

视为9（最大值）-是否有任何方法可以将正确的

I

值直接传递给每个航路点，或者有更好的方法解决此问题？

在调用回调时，var

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

for（变量i=0；i

// 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 (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"
    });    
}