上課更改IDS打破我的代碼

Question

我不擅長用JavaScript和jQuery，但努力學習和工作，使一些腳本:) 我有這樣的腳本工作：

jQuery(document).ready(function($) { 
    var scroll_start = 0; 
    var startchange = $('#homepage-header'); 
    var offset = startchange.offset(); 
    if (startchange.length) { 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if (scroll_start >= offset.top) { 
     $("#nav-toggle em").css('background-color', '#ffffff'); 
     } 
    }); 
    } 
}); 
jQuery(document).ready(function($) { 
    var scroll_start = 0; 
    var startchange = $('#cosafacciamo'); 
    var offset = startchange.offset(); 
    if (startchange.length) { 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if (scroll_start >= offset.top) { 
     $("#nav-toggle em").css('background-color', '#000000'); 
     } 
    }); 
    } 
}); 
jQuery(document).ready(function($) { 
    var scroll_start = 0; 
    var startchange = $('#successo'); 
    var offset = startchange.offset(); 
    if (startchange.length) { 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if (scroll_start >= offset.top) { 
     $("#nav-toggle em").css('background-color', '#ffffff'); 
     } 
    }); 
    } 
}); 
jQuery(document).ready(function($) { 
    var scroll_start = 0; 
    var startchange = $('#blog'); 
    var offset = startchange.offset(); 
    if (startchange.length) { 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if (scroll_start >= offset.top) { 
     $("#nav-toggle em").css('background-color', '#000000'); 
     } 
    }); 
    } 
}); 
jQuery(document).ready(function($) { 
    var scroll_start = 0; 
    var startchange = $('#contatti'); 
    var offset = startchange.offset(); 
    if (startchange.length) { 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if (scroll_start >= offset.top) { 
     $("#nav-toggle em").css('background-color', '#ffffff'); 
     } 
    }); 
    } 
}); 

然後我試圖簡化此腳本這個：

jQuery(document).ready(function($) { 
    var scroll_start = 0; 
    var startchange = $('.white'); 
    var offset = startchange.offset(); 
    if (startchange.length) { 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if (scroll_start > offset.top) { 
     $("#nav-toggle em").css('background-color', '#ffffff'); 
     } 
    }); 
    } 
}); 
jQuery(document).ready(function($) { 
    var scroll_start = 0; 
    var startchange = $('.dark'); 
    var offset = startchange.offset(); 
    if (startchange.length) { 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if (scroll_start > offset.top) { 
     $("#nav-toggle em").css('background-color', '#000000'); 
     } 
    }); 
    } 
}); 

顯然我放在哪裏是ID的，但這第二個腳本僅適用於前兩個塊（＃首頁頭和#cosafacciamo）。白和.dark類，然後導航撥動沒有按不會再改變顏色了。

爲什麼第一個腳本正常工作，而不是第二個腳本？ 我在做什麼錯？

請幫忙！謝謝;）

Answer 1

當您設置var startchange = $('.white')時，該jQuery對象$('.white')包含幾個DOM元素，但.offset()方法只返回第一個數字。

要解決這個問題，請使用.each()來遍歷每個DOM元素。

您還可以使用JavaScript函數來保持您的代碼DRY。嘗試是這樣的（未經測試）：

function doMyThing(startchange,color) { 
    var scroll_start = 0; 
    if (startchange.length) { 
    startchange.each(function() { 
     var offset = $(this).offset(); 
     $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if (scroll_start >= offset.top) { 
      $("#nav-toggle em").css('background-color', color); 
     } 
     }); // scroll 
    } // if 
    } // doMyThing 
}); 

jQuery(document).ready(function($) { 
    doMyThing($('.white'),'#ffffff'); 
    doMyThing($('.black'),'#000000'); 
});