报了一个错误但是不像以前那样在控制台显示是哪个文件的第几行

报了一个错误但是不像以前那样在控制台显示是哪个文件的第几行

该如何像以前一样显示呢?

http://img1.sycdn.imooc.com//climg/5d3677ae0001cf3816000900.jpg



而且楼层中第二个tab不需要缓存就显示了,第三个tab一直缓存都不显示图片,请问是代码哪里出了问题吗?

tab.js


(function($){

'use strict';

function Tab($elem,options){  //tab构造函数

this.$elem = $elem;

this.options = options;

this.$items = this.$elem.find('.tab-item');

this.$panels = this.$elem.find('.tab-panel');

this.itemNum = this.$items.length;

this.curIndex = this._getCorrectIndex(this.options.activeIndex);

this._init();

}

Tab.DEFAULTS = {  

event:'mouseenter',

css3:false,

js:false,

animation:'fade',

activeIndex:0,

interval:0,

delay:0

};

Tab.prototype._init = function(){

var self = this,

timer = null;

//init show

this.$items.removeClass('tab-item-active');

this.$items.eq(this.curIndex).addClass('tab-item-active');

this.$panels.eq(this.curIndex).show();

this.$elem.trigger('tab-show',[this.curIndex,this.$panels[this.curIndex]]);

//trigger event

this.$panels.on('show shown hide hidden',function(e){

self.$elem.trigger('tab-' + e.type,[self.$panels.index(this),this]);

});

//showHide init

this.$panels.showHide(this.optitons);

//bind event

this.options.event = this.options.event === 'click' ? 'click' : 'mouseenter';

this.$elem.on(this.options.event,'.tab-item',function(){

var elem = this;

if(self.options.delay){  //delay

clearTimeout(timer);

timer = setTimeout(function(){

self.toggle(self.$items.index(elem));

},self.options.delay);

}else{  //immediate

self.toggle(self.$items.index(elem));

}

});

//auto

if(this.options.interval && !isNaN(Number(this.options.interval))){

this.$elem.hover($.proxy(this.pause,this),$.proxy(this.auto,this));

this.auto();

}

};

//获得正确索引值

Tab.prototype._getCorrectIndex = function(index){

if(isNaN(Number(index))) return 0;

if(index < 0) return this.itemNum - 1;

if(index > this.itemNum - 1) return 0;

return index;

}

//切换

Tab.prototype.toggle = function(index){

if(this.curIndex === index) return;

this.$panels.eq(this.curIndex).showHide('hide');

this.$panels.eq(index).showHide('show');

this.$items.eq(this.curIndex).removeClass('tab-item-active');

this.$items.eq(index).addClass('tab-item-active');

this.curIndex = index;

};

//自动切换

Tab.prototype.auto = function(){

var self = this;

this.intervalId = setInterval(function(){

self.toggle(self._getCorrectIndex(self.curIndex + 1));

},this.options.interval);

};

//暂停切换

Tab.prototype.pause = function(){

clearInterval(this.intervalId);

};

//注册插件(单例模式,防止多次实例化)

$.fn.extend({

tab:function(option){

return this.each(function(){

var $this = $(this),

tab = $this.data('tab'),

options = $.extend({},Tab.DEFAULTS,$this.data(),typeof option === 'object' && option);

if(!tab){  //first time

$this.data('tab',tab = new Tab($this,options));

}

if(typeof tab[option] === 'function'){

tab[option]();

}

});

}

});

})(jQuery);





index.js:


(function($){

'use strict';

//menu

var dropdown = {};

$('.menu').on('dropdown-show',function(e){

dropdown.loadOnce($(this),dropdown.buildMenuItem);

});

$('.menu').dropdown({

css3:true,

js:false

});

dropdown.buildMenuItem = function($elem,data){

var html = '';

if(data.length === 0) return;

for(var i=0;i<data.length;i++){

html += '<li><a href="' +data[i].url+ '" target="_blank" class="menu-item">' + data[i].name + '</a></li>';

}

$elem.find('.dropdown-layer').html(html);

};

//header search

var $headerSearch = $('#header-search');

$headerSearch.on('search-getData',function(e,data){

console.log(e.type);

console.log(data);

}).on('search-noData',function(e){

console.log(e.type);

});

$headerSearch.search({

autocomplete:true,

css3:false,

js:false,

animation:'fade'

});


//header search

var search = {};

search.$headerSearch = $('#header-search');

search.$headerSearch.html = '',

search.$headerSearchmaxNum = 10;

$headerSearch.on('search-getData',function(e,data){

/*var html = '',

dataNum = data['result'].length,

maxNum = 10;*/

var $this = $(this);

search.$headerSearch.html = search.$headerSearch.createHeaderSearchLayer(data,maxNum);

$this.search('appendLayer',search.$headerSearch.html);

if(html){

$this.search('showLayer');

}else{

$this.search('hideLayer');

}

}).on('search-noData',function(e){

$(this).search('hideLayer').search('appendLayer','');

}).on('click','.search-layer-item',function(){

// $input.val(removeHtmlTags($(this).html()));

search.$headerSearch.search('setInputVal',$(this).html());

search.$headerSearch.search('submit');

});

search.$headerSearch.search({

autocomplete:true,

css3:false,

js:false,

animation:'fade',

getDataInterval:200

});




search.$headerSearch.createHeaderSearchLayer = function(data,maxNum){

var html = '',

dataNum = data['result'].length;

if(dataNum === 0){

return '';

}

for(var i = 0;i < dataNum;i++){

if(i >= maxNum) break;

html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>';

}

return html;

};


//focus-category分类样式

$('#focus-category').find('.dropdown')

.on('dropdown-show',function(){

dropdown.loadOnce($(this),dropdown.createCategoryDetails);

})

.dropdown({

css3:false,

js:false

});

dropdown.createCategoryDetails = function($elem,data){

var html = '';

for(var i= 0;i< data.length;i++){

html += '<dl class="category-details cf"><dt class="category-details-title fl"><a href="###" target="_blank" class="category-details-title-link">'+ data[i].title + '</a></dt><dd class="category-details-item fl">';

for(var j=0;j<data[i].items.length;j++){

html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>';

}

html += '</dd></dl>';

}

$elem.find('.dropdown-layer').html(html);

}







//公共的

dropdown.loadOnce = function($elem,success){

var dataLoad = $elem.data('load');

if(!dataLoad) return;

if(!$elem.data('loaded')){

$elem.data('loaded',true);

$.getJSON(dataLoad,function(data){

if(typeof success === 'function') success($elem,data);

}).fail(function(){

$elem.data('loaded',false);

});

}

}


//focus-slider

var slider = {};

slider.$focusSlider = $('#focus-slider');

slider.loadImg = function(url,imgLoaded,imgFailed){

var image = new Image();

image.onerror = function(){

if(typeof imgFailed === 'function') imgFailed(url);

};

image.onload = function(){

if(typeof imgLoaded === 'function') imgLoaded(url);

};

image.src = url;

setTimeout(function(){

image.src = url;

},1000);

};

slider.lazyLoad = function($elem){

$elem.items = {};

$elem.loadedItemNum = 0;  //表示目前加载了几张

$elem.totalItemNum = $elem.find('.slider-img').length;  //有几张待加载


//除了包装函数外,利用自定义事件:

$elem.on('slider-show',$elem.loadItem = function(e,index,elem){

console.log(1);

if($elem.items[index] !== 'loaded'){

//1.判断没有加载后,触发加载事件

$elem.trigger('slider-loadItem',[index,elem]);

}

});

//2.监听loadItem事件:

$elem.on('slider-loadItem',function(e,index,elem){

//按需加载

var $imgs = $(elem).find('.slider-img');

$imgs.each(function(_,el){

var $img = $(el);

$imgs.each(function(_,el){

var $img = $(el);

slider.loadImg($img.data('src'),function(url){

$img.attr('src',url);

$elem.items[index] = 'loaded';

$elem.loadedItemNum++;

console.log(index + ':loaded');

if($elem.loadedItemNum === $elem.totalItemNum){

//触发一个全部加载完毕的消息,发送出去

$elem.trigger('slider-itemsLoaded');

}

},function(url){

//多加载一次

//显示备用图片

$img.attr('src','../img/focus-slider/placeholder.png');

});

});

});

});

//3.清除事件

$elem.on('slider-itemsLoaded',function(e){

console.log('itemsLoaded');

$elem.off('slider-show',$elem.loadItem);

})

};


slider.$focusSlider.items = {};

slider.$focusSlider.loadedItemNum = 0;  //表示目前加载了几张

slider.$focusSlider.totalItemNum = slider.$focusSlider.find('.slider-img').length;  //有几张待加载


//除了包装函数外,利用自定义事件:

slider.$focusSlider.on('slider-show',slider.$focusSlider.loadItem = function(e,index,elem){

//console.log(1);

if(slider.$focusSlider.items[index] !== 'loaded'){

//1.判断没有加载后,触发加载事件

slider.$focusSlider.trigger('slider-loadItem',[index,elem]);

}

});

//2.监听loadItem事件:

slider.$focusSlider.on('slider-loadItem',function(e,index,elem){

//按需加载

var $img = $(elem).find('.slider-img');

slider.loadImg($img.data('src'),function(url){

$img.attr('src',url);

slider.$focusSlider.items[index] = 'loaded';

slider.$focusSlider.loadedItemNum++;

console.log(index + ':loaded');

if(slider.$focusSlider.loadedItemNum === slider.$focusSlider.totalItemNum){

//触发一个全部加载完毕的消息,发送出去

slider.$focusSlider.trigger('slider-itemsLoaded');

}

},function(url){

//多加载一次

//显示备用图片

$img.attr('src','../img/focus-slider/placeholder.png');

});

});

//3.清除事件

slider.$focusSlider.on('slider-itemsLoaded',function(e){

console.log('itemsLoaded');

slider.$focusSlider.off('slider-show',slider.$focusSlider.loadItem);

})

slider.lazyLoad(slider.$focusSlider); //延迟加载

slider.$focusSlider.slider({

css3:true,

js:false,

animation:'fade',  //slide

activeIndex:0,

interval:2000

// loop:true  // 是否首尾相连

});



//todays-slider


slider.$todaysSlider = $('#todays-slider');


slider.lazyLoad(slider.$todaysSlider);  //延迟加载

slider.$todaysSlider.slider({

css3:true,

js:false,

animation:'fade',  

activeIndex:0,

interval:0

// loop:true  // 是否首尾相连

});



//floor

var $floor = $('.floor');

function lazyLoadFloorImgs($elem){  //延迟加载

var items = {},

loadedItemNum = 0,

totalItemNum = $elem.find('.floor-img').length,

loadItemFn = null;

$elem.on('tab-show',loadItemFn = function(e,index,elem){

console.log(1);

if(items[index] !== 'loaded'){

$elem.trigger('tab-loadItem',[index,elem]);

}

});

$elem.on('tab-loadItem',function(e,index,elem){

//按需加载

var $imgs = $(elem).find('.floor-img');

$imgs.each(function(_,el){

var $img = $(el);

slider.loadImg($img.data('src'),function(url){

$img.attr('src',url);

items[index] = 'loaded';

loadedItemNum++;

console.log(index + 'loaded');

if(loadedItemNum === totalItemNum){

//全部加载完毕

$elem.trigger('tab-itemsLoaded');

}

},function(url){

console.log('从'+url+'加载图片失败');

$img.attr('src','img/floor/placeholder.png');

});

});

});

$elem.on('tab-itemsLoaded',function(e){

console.log('tab-itemsLoaded');

//清除事件

$elem.off('tab-show',loadItemFn);

})

}

$floor.each(function(_,elem){

lazyLoadFloorImgs($(elem));

});

$floor.tab({

event:'mouseenter',  //click

css3:false,

js:false,

animation:'fade',

activeIndex:0,

interval:0,

delay:0

});

})(jQuery);




其他代码与源码一样

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2019-07-23 16:30:33

同学你好, 老师将你的代码放在源码中测试是没有报错信息的。

建议: 同学可以先理清楚代码的实现思路,然后对着源码排查一下

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~

  • 提问者 hyperse #1
    哦看到后面一课我知道自己哪里出错了,floor-loading还没有复制到img文件夹中,但是html代码又是直接复制的源码。谢谢老师
    2019-07-23 17:30:46
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师