今天要幫客戶寫一個自動滑到錨點的jQuery特效功能，共有5個按鈕，所以正常程式寫法是click()寫5次然後帶入按鈕的id及要滑入到錨點的id，但是這樣code又寫的落落長，不利seo優化，才想說用javaScript常用的for迴圈設個$i值<6的時候$i++的寫法，誰知道這方法在jQuery居然不能用，因為所有的數值都會被前面的數值所覆蓋。
例如迴圈本來因該是要帶出#s1,#s2,#s3,#s4,#s5的id數值，但用for迴圈卻只會顯示最後的數值，所以5個id通通都會變成#s5,#s5,#s5,#s5,#s5，沒辦法只好花時間研究一下jQuery用的迴圈方法，找到了.each()方法，經測試後的確是能帶入#s0,#s1,#s2,#s3,#s4的id數值，不會被最後的數值覆蓋到，以下為.each()使用方法範例
教學撰寫：徐嘉裕 Neil hsu
例如迴圈本來因該是要帶出#s1,#s2,#s3,#s4,#s5的id數值，但用for迴圈卻只會顯示最後的數值，所以5個id通通都會變成#s5,#s5,#s5,#s5,#s5，沒辦法只好花時間研究一下jQuery用的迴圈方法，找到了.each()方法，經測試後的確是能帶入#s0,#s1,#s2,#s3,#s4的id數值，不會被最後的數值覆蓋到，以下為.each()使用方法範例
其中紅色字的index就是for迴圈$i值的意思， each()會自動去解析在頁面中全部的class="menu"共有幾個，由上往下排序帶出數值，如果有5個則 each()就會產生5個迴圈，index數值會從0開始計算產生0,1,2,3,4等數值出來，就可以帶入變數中產生id的編號了。
$(".menu").each(function(index) {
$("#s"+index+"").click(function() {
$('html,body').animate({scrollTop:$("#section"+index+"").offset().top}, "show");
return false;
});
});
教學撰寫：徐嘉裕 Neil hsu
Hi!幫你補充一下
回覆刪除如果使用for，那宣告必須使用let，也可以達到each的效果唷
for(let index=0;index<5;index++){
console.log(index);
$("#s"+index+"").click(function() {
$('html,body').animate({scrollTop:$("#section"+index+"").offset().top}, "show");
return false;
});
}
太棒了 比FOR迴圈方便多了
回覆刪除