这个错误应该去哪找 调用没问题
来源:2-1 tab选项卡-基本功能
慕后端8593059
2019-01-24 11:17:07

(function($){
'use strict';
function Tab($elem,options){//options参数 $elemdom元素
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={
css3: true,
js: false,
animation: 'fade', // fade slide//切换方式
activeIndex: 0,
interval: 0
};
Tab.prototype._init=function(){
var self=this;
//init show
this.$items.removeClass('tab-item-active');
this.$items.eq(this.curIndex).addClass('tab-item-active');
this.$panels.eq(this.curIndex).show()//显示某一个面板
//trigger event触发事件
this.$panels.on('show shown hide hidden',function(e){
self.$elem.trigger('tab-'+e.type,[e.type,self.$panels.index(this),this]);
});
//showHide init 初始化 调用
this.$panels.showHide(this.options);
//bind event 绑定事件
this.options.event=this.options.event==='click'?'click':'mouseenter';
this.$elem.on(this.options.event,'.tab-item',function(){//冒泡机制事件委托绑定事件
self.toggle(self.$items.index(this));
});
};
//获得正确的索引值方法
Tab.prototype._getCorrectIndex=function(index){
if(isNaN(Number(index))) return 0;//如果不是一个数则索引从0开始
if(index<0) return this.number-1;//如果小于0则返回number-1
if(index>this.number-1) return 0;//如果大于number-1则返回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;
}
//插件注册 暴露接口
$.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 && typeof option !== 'object') return;
if (!tab) { // first time
$this.data('tab', tab = new Tab($this, options));
}
if (typeof tab[option] === 'function') {
tab[option]();
}
});
}
});
})(jQuery);
(function($) {
'use strict';
//menu
var dropdown={};
$('.menu')
.on('dropdown-show', function(e) {
dropdown.loadOnce($(this), dropdown.buildMenuItem);
})
.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);
};
//cart购物车
$('#cart').on('dropdown-show', function() {
dropdown.loadOnce($(this), function($elem, data) {
dropdown.buildCartItem($elem, data);
dropdown.updateCart($elem, data);
});
}).dropdown({
css3: true,
js: false
});
dropdown.buildCartItem=function($elem, data) {
var html = "";
if (data.length === 0) { // no goods
html += '<div class="cart-nogoods"><i class="icon cart-nogoods-icon fl"></i><div class="cart-nogoods-text fl">购物车里还没有商品<br />赶紧去选购吧!</div></div>';
$elem.find('.dropdown-layer').html(html);
return;
}
html += '<h4 class="cart-title">最新加入的商品</h4><ul class="cart-list">';
for (var i = 0; i < data.length; i++) {
html += '<li class="cart-item"><a href="###" target="_blank" class="cart-item-pic fl"><img src="' + data[i].pic + '" alt="" /></a><div class="fl"><p class="cart-item-name text-ellipsis"><a href="###" target="_blank" class="link">' + data[i].name + '</a></p><p class="cart-item-price"><strong>¥' + data[i].price + ' x ' + data[i].num + '</strong></p></div><a href="javascript:;" title="删除" class="cart-item-delete link fr">X</a></li>';
}
html += '</ul><div class="cart-info"><span class="fl">共 <strong class="cart-total-num">0</strong> 件商品 共计<strong class="cart-total-price">¥ 0.00</strong></span><a href="###" target="_blank" class="cart-info-btn btn fr">去购物车</a></div>';
// setTimeout(function(){
$elem.find('.dropdown-layer').html(html);
// },1000);
};
function updateCart($elem, data) {
var $cartNum = $elem.find('.cart-num'),
$cartTotalNum = $elem.find('.cart-total-num'),
$cartTotalPrice = $elem.find('.cart-total-price'),
dataNum = data.length,
totalNum = 0,
totalPrice = 0;
if (dataNum === 0) { // no goods
return;
}
for (var i = 0; i < dataNum; i++) {
totalNum += +data[i].num;
totalPrice += +data[i].num * +data[i].price;
}
$cartNum.html(totalNum);
$cartTotalNum.html(totalNum);
$cartTotalPrice.html('¥' + totalPrice);
};
//header search
var search={};
search.$headerSearch = $('#header-search');
search.$headerSearch.html = '';
search.$headerSearch.maxNum = 10;
// 获得数据处理
search.$headerSearch.on('search-getData', function(e, data) {
var $this = $(this);
search.$headerSearch.html = search.$headerSearch.createHeaderSearchLayer(data, search.$headerSearch.maxNum);
$this.search('appendLayer',html);
// 将生成的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() {
// 点击每项时,提交
search.$headerSearch.search('setInputVal', $(this).html());
search.$headerSearch.search('submit');
});
search.$headerSearch.search({
autocomplete: true,
css3: false,
js: false,
animation: 'fade',//切换方式
getDataInterval: 0
});
// 获取数据,生成html
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-detail cf"><dt class="category-detail-title fl"><a href="###" target="_blank" class="category-detail-title-link">' + data[i].title + '</a></dt><dd class="category-detail-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>';
}
// setTimeout(function () {
$elem.find('.dropdown-layer').html(html);
// },1000);
};
dropdown.loadOnce= function($elem, success) {
var dataLoad = $elem.data('load');
if (!dataLoad) return;
if (!$elem.data('loaded')) {
$elem.data('loaded', true);
$.getJSON(dataLoad).done(function(data) {
if (typeof success === 'function') success($elem, data);
}).fail(function() {
$elem.data('loaded', false);
});
}
};
// foucs-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') {
$elem.trigger('slider-loadItem', [index, elem]);
}
});
$elem.on('slider-loadItem', function(e, index, elem) {
// 按需加载
var $imgs = $(elem).find('.slider-img');
$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) {
console.log('从' + url + '加载图片失败');
// 多加载一次
// 显示备用图片
$img.attr('src', '../img/focus-slider/placeholder.png');
});
});
});
$elem.on('slider-itemsLoaded', function(e) {
console.log('itemsLoaded');
// 清除事件
$elem.off('slider-show', $elem.loadItem);
});
}
slider.lazyLoad(slider.$focusSlider);
slider.$focusSlider.slider({
css3: true,
js: false,
animation: 'fade', // fade slide//切换方式
activeIndex: 0,
interval: 0
});
// todays-slider
slider.$todaysSlider = $('#todays-slider');
slider.lazyLoad(slider.$todaysSlider);
slider.$todaysSlider.slider({
css3: true,
js: false,
animation: 'fade', // fade slide//切换方式
activeIndex: 0,
interval: 0
});
// 楼层导航js调用 floor
//floor
var $floor=$('.floor');
$floor.tab({
event:'mouseenter',// click或click
css3:false,
js:false,
animation:'fade',
activeIndex:0
});
})(jQuery);
// var $focusSlider = $('#focus-slider');
// $focusSlider.items = {};
// $focusSlider.loadedItemNum = 0;
// $focusSlider.totalItemNum = $focusSlider.find('.slider-img').length;
// $focusSlider.on('slider-show', $focusSlider.loadItem = function(e, index, elem) {
// console.log(1);
// if ($focusSlider.items[index] !== 'loaded') {
// $focusSlider.trigger('slider-loadItem', [index, elem]);
// }
// });
// $focusSlider.on('slider-loadItem', function(e, index, elem) {
// // 按需加载
// var $imgs = $(elem).find('.slider-img');
// $imgs.each(function(_, el) { // _ 相当占位,不使用该参数。
// var $img = $(el);
// loadImg($img.data('src'), function(url) {
// $img.attr('src', url);
// $focusSlider.items[index] = 'loaded';
// $focusSlider.loadedItemNum++;
// console.log(index + ': loaded');
// if ($focusSlider.loadedItemNum === $focusSlider.totalItemNum) {
// // 全部加载完毕
// $focusSlider.trigger('slider-itemsLoaded');
// }
// }, function(url) {
// console.log('从' + url + '加载图片失败');
// // 多加载一次
// // 显示备用图片
// $img.attr('src', '../img/focus-slider/placeholder.png');
// });
// }
// });
// $focusSlider.on('slider-itemsLoaded', function(e) {
// console.log('itemsLoaded');
// // 清除事件
// $focusSlider.off('slider-show', $focusSlider.loadItem);
// });
// function loadImg(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);
// }
// $focusSlider.slider({
// css3: true,
// js: false,
// animation: 'fade', // fade slide
// activeIndex: 0,
// interval: 0
// });
//todays-slider
// var $todaysSlider = $('#todays-slider');
// $todaysSlider.items = {};
// $todaysSlider.loadedItemNum = 0;
// $todaysSlider.totalItemNum = $todaysSlider.find('.slider-img').length;
// $todaysSlider.on('slider-show', $todaysSlider.loadItem = function(e, index, elem) {
// console.log(1);
// if ($todaysSlider.items[index] !== 'loaded') {
// $todaysSlider.trigger('slider-loadItem', [index, elem]);
// }
// });
// $todaysSlider.on('slider-loadItem', function(e, index, elem) {
// // 按需加载
// var $imgs = $(elem).find('.slider-img');
// $imgs.each(function(_, el) { // _ 相当占位,不使用该参数。
// var $img = $(el);
// loadImg($img.data('src'), function(url) {
// $img.attr('src', url);
// $todaysSlider.items[index] = 'loaded';
// $todaysSlider.loadedItemNum++;
// console.log(index + ': loaded');
// if ($todaysSlider.loadedItemNum === $todaysSlider.totalItemNum) {
// // 全部加载完毕
// $todaysSlider.trigger('slider-itemsLoaded');
// }
// }, function(url) {
// console.log('从' + url + '加载图片失败');
// // 多加载一次
// // 显示备用图片
// $img.attr('src', '../img/focus-slider/placeholder.png');
// });
// });
// });
// $todaysSlider.on('slider-itemsLoaded', function(e) {
// console.log('itemsLoaded');
// // 清除事件
// $todaysSlider.off('slider-show', $todaysSlider.loadItem);
// });
// function loadImg(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);
// }
// $todaysSlider.slider({
// css3: true,
// js: false,
// animation: 'fade', // fade slide
// activeIndex: 0,
// interval: 0
// });1回答
好帮手慕星星
2019-01-24
你好,将这两段代码放在源码中进行测试是没有进行报错的。看到报错信息是index.js文件使用tab.js提供的方式报错了,同学在html中引入两个文件的顺序是不是相反了呢:

需要先引入tab.js,然后引入index.js,这样才能使用tab.js中的方法。
如果还有问题,建议将html文件中的代码也粘贴过来吧。
祝学习愉快!
相似问题