这个错误应该去哪找 调用没问题
来源: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文件中的代码也粘贴过来吧。
祝学习愉快!
相似问题