[英]Pass Variables to JQuery Waypoints
我正在嘗試使用JQuery Waypoints做一個變色標題。 我有一組對象,這些對象顯示了一頁網站的各個部分及其相關的顏色(如下所示):
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'}
);
然后,我使用下面的腳本為每個部分(在HTML中標記為<section id="...">
)創建JQuery Waypoint:
// 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循環時,它可以工作,但這需要大量的代碼重復。 如果以后添加更多部分,我希望做的修改盡可能少。
使用警報進行調試時,我發現所有Waypoint都將i
視為9(這將是最大值)-有沒有辦法將正確的i
值直接傳遞給每個Waypoint,或者有更好的解決方法這個?
在調用回調函數的那一刻,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"
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.