減少代碼重複

有沒有更好的方法來做到這一點，以減少代碼重複？減少代碼重複

也許以某種方式循環'pagesTop'數組？

以下函數在窗口滾動事件中被初始化。

謝謝。

function redrawSideNav() { 
    var pagesTop = new Array(); 
    $('.page').each(function(index, elem){ 
     pagesTop[index] = $(this); 
    }); 

    $('.menu, .page').find('a').removeClass('active'); 
    if ($(document).scrollTop() >= pagesTop[0].offset().top && $(document).scrollTop() < pagesTop[1].offset().top) { 
     var target = '#' + pagesTop[0].attr('id'); 
     $('[href^="'+target+'"]').addClass('active'); 
    } else if ($(document).scrollTop() >= pagesTop[1].offset().top && $(document).scrollTop() < pagesTop[2].offset().top) { 
     var target = '#' + pagesTop[1].attr('id'); 
     $('[href^="'+target+'"]').addClass('active'); 
    } else if ($(document).scrollTop() >= pagesTop[2].offset().top && $(document).scrollTop() < pagesTop[3].offset().top) { 
     var target = '#' + pagesTop[2].attr('id'); 
     $('[href^="'+target+'"]').addClass('active'); 
    } else if ($(document).scrollTop() >= pagesTop[3].offset().top && $(document).scrollTop() < pagesTop[4].offset().top) { 
     var target = '#' + pagesTop[3].attr('id'); 
     $('[href^="'+target+'"]').addClass('active'); 
    } else if ($(document).scrollTop() >= pagesTop[4].offset().top) { 
     var target = '#' + pagesTop[4].attr('id'); 
     $('[href^="'+target+'"]').addClass('active'); 
    } 
}

來源

2013-10-20 Jason Norris

那麼它會是一個良好的開端拉的$（document）.scrollTop（）伸到一個變量，只能做$（ '[^ HREF = 「 '+目標+'」]'）。addClass（ '活性'）;最後在你制定出目標是什麼之後 –

嘿，這是很好的忠告，謝謝！ –

好吧，似乎只有數字在下面的代碼中發生了變化，所以你可以使用for-loop和break-statement。當中斷get被觸發時，for循環的其餘部分將不會被執行。最後的是一樣的，但沒有最後的條件。我們可以通過向pagesTop添加一個虛擬元素來僞造這個，這使最後一個條件總是成立。

var a = { 
    offset: function() { 
     return {'top': 9999999999999}; 
    } 
}; 
pagesTop.push(a); 

for(var i = 0; i < pagesTop.length-1; i++) { 
    if ($(document).scrollTop() >= pagesTop[i].offset().top && $(document).scrollTop() < pagesTop[i+1].offset().top) { 
     var target = '#' + pagesTop[i].attr('id'); 
     $('[href^="'+target+'"]').addClass('active'); 
     break; 
    } 
}

來源

2013-10-20 15:50:04 Sumurai8

必須把它給你背後的想法。如果不需要，停止執行循環並僞造最後一個條件，絕對精湛，謝謝！ –

做一步一步：

首先，我將創建一個變量$(document).scrollTop()和更換if語句中的代碼：

var scrollTop = $(document).scrollTop(); 
var targetIndex = null; 

$('.menu, .page').find('a').removeClass('active'); 
if (scrollTop >= pagesTop[0].offset().top && scrollTop < pagesTop[1].offset().top) { 
    targetIndex = 0 
} else if (scrollTop >= pagesTop[1].offset().top && scrollTop < pagesTop[2].offset().top) { 
    targetIndex = 1; 
} else if (scrollTop >= pagesTop[2].offset().top && scrollTop < pagesTop[3].offset().top) { 
    targetIndex = 2; 
} else if (scrollTop >= pagesTop[3].offset().top && scrollTop < pagesTop[4].offset().top) { 
    targetIndex = 3; 
} else if (scrollTop >= pagesTop[4].offset().top) { 
    targetIndex = 4; 
} 

var target = '#' + pagesTop[targetIndex].attr('id'); 
$('[href^="'+target+'"]').addClass('active');

之後，我將開始建立一個循環，而不是如果使用else if級聯：

var scrollTop = $(document).scrollTop(); 
var targetIndex = null; 
for (var i = 0; i < 4 && !targetindex; i++) { 
    if (scrollTop >= pagesTop[i].offset().top && scrollTop < pagesTop[i + 1].offset().top) { 
     targetIndex = i; 
    } 
} 
targetIndex = targetIndex || 4; 
var target = '#' + pagesTop[targetIndex].attr('id'); 
$('[href^="'+target+'"]').addClass('active');

（未經測試..也許我提出了一些指標/語法錯誤。）

來源

2013-10-20 15:42:27 micha

下面的代碼適用於動態大小的數組：

var scrollTop = $(document).scrollTop(); 
for (var i=0;i<pagesTop.length ;i++) { 
    tempCond = pagesTop[i+1] ? (scrollTop <= pagesTop[i+1].offset().top) : true; 
    if(scrollTop >= pagesTop[i].offset().top && tempCond) { 
     var target = '#' + pagesTop[i].attr('id'); 
     $('[href^="'+target+'"]').addClass('active');  
     break; 
    } 
}

武士答案的區別：
而不是增加一個虛構的項目保證循環的數組至少要執行一次，而if語句的第二個條件總是爲真，如果當前元素是數組中的最後一項，我在循環中檢查：如果是，則在第二個條件中if語句直接設置爲true，否則，條件設置爲scrollTop <= pagesTop[i+1].offset().top

來源

2013-10-20 15:47:01

嗯;你的代碼比我的代碼略好，但請在答案中添加一些解釋。 – Sumurai8

希望現在變得更加清晰 –

減少代碼重複

回答

相關問題