Console.log tidak berfungsi sama sekali
Sekelompok kode tidak berfungsi dan saya mencoba mengidentifikasi di mana letak masalahnya, tetapi console.log() tidak mencatat hasil apa pun di alat Chrome Dev, apakah saya melakukannya dengan benar?
$(window).scroll(function() {
$('section').each(function(){
var id='#'+$(this).attr('id'),
off=$(id).offset().top,
hei=$(id).height(),
winscroll=$(window).scrollTop(),
dif=hei+off-($(window).height());
if (winscroll >= off && winscroll<=dif) {
console.log('first broken');
$(id+' .sticky').removeClass('abs').addClass('fix');
} else if (winscroll > dif){
console.log('second broken');
$(id+' .sticky').removeClass('fix').addClass('abs');
} else {
console.log('third broken');
$(id+' .sticky').removeClass('fix abs');
} });
});EDIT KODE LENGKAP DITAMBAHKAN
$(document).ready(function() {
// If a browser supports 3D transforms use the fancy menu if it doesn't, use standard accordion menu instead
if($('html').hasClass('csstransforms3d')){
$( "#mp-menu" ).removeClass( "snap-drawers" ).addClass( "mp-menu" );
$('nav ul li ul').css('border-bottom','1px solid rgba(255, 255, 255, .05)');
$('nav ul li ul').css('background','none');
// Insert elements where necessary to create the right structure
$('#mp-menu').wrapInner('<div class="mp-level" />');
$('#mp-menu').find('li > ul').wrap('<div class="mp-level" />');
$("#mp-menu ul li .mp-level").prepend(function () {
return '<span class="menu-title">' + $(this).prev().text() + '</span> <a class="ico mp-back" href="#">Back</a>';
});
// load in necessary JS files
$.getScript('http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/multi-level-menu.js');
} else {
// load in necessary JS files
$.getScript( "http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/jquery.navgoco.min.js", function() {
$("#demo1").navgoco({accordion: true});
});
$.getScript( "http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/snap.min.js", function() {
// Snapper settings
var snapper = new Snap({
element: document.getElementById('scroller'),
disable: 'right',
maxPosition: 291
});
var addEvent = function addEvent(element, eventName, func) {
if (element.addEventListener) {
return element.addEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.attachEvent("on" + eventName, func);
}
};
// Toggle button
addEvent(document.getElementById('trigger'), 'click', function(){
if( snapper.state().state=="left" ){
snapper.close();
$( ".menu-trigger" ).removeClass( "active" );
} else {
snapper.open('left');
$( ".menu-trigger" ).addClass( "active" );
}
});
addEvent(document.getElementById('scroller'), 'click', function(){
if( snapper.state().state=="left" ){
$( ".menu-trigger" ).removeClass( "active" );
}
});
/* Prevent Safari opening links when viewing as a Mobile App */
(function (a, b, c) {
if(c in b && b[c]) {
var d, e = a.location,
f = /^(a|html)$/i;
a.addEventListener("click", function (a) {
d = a.target;
while(!f.test(d.nodeName)) d = d.parentNode;
"href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)
}, !1)
}
})(document, window.navigator, "standalone");
});
} // end if
fitHeight();
$(window).scroll(function() {
$('section').each(function(){
var id='#'+$(this).attr('id'),
off=$(id).offset().top,
hei=$(id).height(),
winscroll=$(window).scrollTop(),
dif=hei+off-($(window).height());
console.log('msj');
if (winscroll >= off && winscroll<=dif) {
$(id+' .sticky').removeClass('abs').addClass('fix');
} else if (winscroll > dif){
$(id+' .sticky').removeClass('fix').addClass('abs');
} else {
$(id+' .sticky').removeClass('fix abs');
}
});
});
});
// Trigger FitHeight on browser resize
$(window).resize(fitHeight);EDIT
Beberapa bagian dari kode lengkap (di atas) merujuk ke file JS lain dan kode tidak mengembalikan kesalahan saat dijalankan dengan adanya file-file ini. Setelah pemecahan masalah, saya melihat pesan konsol sebelum fungsi gulir tetapi saya tidak melihat pesan konsol dalam fungsi gulir.
fitHeight();
console.log('About to bind scroll effects'); // I SEE THIS MESSAGE
$(window).scroll(function() {
console.log("scroll bound, now loop through sections"); //BUT NOT THIS ONE
$('section').each(function(){
Sepertinya Anda menyembunyikan log JavaScript atau menentukan bahwa Anda hanya ingin melihat Kesalahan atau Peringatan. Buka Alat Pengembang Chrome dan buka tab Konsol. Di bagian bawah Anda ingin memastikan bahwa JavaScript dicentang dan juga memastikan bahwa Anda memiliki " All &", " Logs &" atau " Debug &" yang dipilih.
Pada gambar di atas saya telah mencentang JavaScript, Network, Logging, CSS dan Other dan "All" dipilih.
Masalah potensial lainnya adalah fungsi $(window).scroll() Anda tidak dibungkus dalam fungsi .ready() (seperti yang didokumentasikan di sini):
$(document).ready(function() {
$(window).scroll(function() {
...
});
});Ketika menempelkan kode Anda ke JSFiddle dan memberikan beberapa konten tiruan, kode Anda berfungsi dengan baik: JSFiddle demo.
Edit:
Pertanyaannya telah diedit. Kode baru yang diberikan melempar dua kesalahan:
Uncaught ReferenceError: fitHeight tidak didefinisikan Uncaught TypeError: Tidak dapat membaca properti 'addEventListener' dari null
Karena hal ini, kode menghentikan eksekusi sebelum mencapai panggilan console.log apa pun.
Saya merasa agak bodoh dalam hal ini, tetapi biarlah ini menjadi pelajaran bagi semua orang...Pastikan Anda menargetkan pemilih yang tepat!
Pada dasarnya konsol tidak mencatat apa pun karena cuplikan kode khusus ini mencoba mengambil area gulir jendela saya, padahal sebenarnya kode saya disetel secara berbeda untuk menggulir seluruh DIV. Segera setelah saya mengubah:
$(window).scroll(function() {menjadi seperti ini:
$('#scroller').scroll(function() {Konsol mulai mencatat pesan yang benar.
Pertimbangkan pendekatan yang lebih pragmatis terhadap pertanyaan tentang "melakukannya dengan benar".
console.log("about to bind scroll fx");
$(window).scroll(function() {
console.log("scroll bound, loop through div's");
$('div').each(function(){Jika kedua log tersebut menghasilkan output dengan benar, maka kemungkinan masalahnya ada pada deklarasi var Anda. Untuk men-debug itu, pertimbangkan untuk memecahnya menjadi beberapa baris:
var id='#'+$(this).attr('id');
console.log(id);
var off=$(id).offset().top;
var hei=$(id).height();
var winscroll=$(window).scrollTop();
var dif=hei+off-($(window).height());Dengan melakukan ini, setidaknya selama debugging, Anda mungkin menemukan bahwa var id tidak terdefinisi, menyebabkan kesalahan di seluruh sisa kode. Apakah mungkin beberapa tag div Anda tidak memiliki id?
