控制台日志根本不起作用
一堆代码无法运行,我正试图找出问题所在,但在 Chrome 浏览器开发工具中,console.log()
没有记录任何结果,我这样做对吗?
$(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');
} });
});
已添加 编辑完整代码
$(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);
编辑
完整代码(上文)的某些部分引用了其他 JS 文件,在运行这些文件时代码不会返回错误。排除故障后,我在滚动函数之前看到了控制台消息,但在滚动函数中看不到控制台消息。
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(){
27
3
听起来您要么隐藏了 JavaScript 日志,要么指定只查看 "错误 "或 "警告"。打开 Chrome 浏览器的 "开发工具",进入 "控制台 "选项卡。在底部,你要确保 JavaScript 已被勾选,还要确保你选择了 "全部"、"日志"或 "调试"。
![屏幕截图示例][1]
在上图中,我勾选了 JavaScript、Network、Logging、CSS 和 Other,并选择了 "All"。
另一个潜在问题可能是您的
$(window).scroll()
函数没有封装在.ready()
函数中(如 here 所述):将您的代码粘贴到 JSFiddle 中并给出一些虚假内容后,您的代码可以正常运行:[JSFiddle 演示][3]。
编辑:
问题已编辑。给出的新代码有两个错误:
因此,代码会在调用任何
console.log
之前停止执行。我觉得这样做有点愚蠢,但这也给大家上了一课......确保你的目标是正确的选择器!
基本上,控制台没有记录任何内容,因为这个代码段试图抓取窗口的滚动区域,而实际上我的代码设置不同,是为了滚动整个 DIV。只要我修改了
改为
控制台开始记录正确的信息。
考虑用更务实的方法来解决 "正确行事 "的问题。
如果这两个 "日志 "都能正确输出,那么问题很可能出在 var 声明中。 要调试这个问题,可以考虑将其分成几行:
这样做,至少在调试过程中,您可能会发现 var
id
是未定义的,从而导致代码的其他部分出现错误。 您的某些div
标记是否可能没有 id'?