这个错误应该去哪找 调用没问题

来源:2-1 tab选项卡-基本功能

慕后端8593059

2019-01-24 11:17:07

http://img.mukewang.com/climg/5c492df500015e5d13310063.jpg

(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">&#xe600;</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中引入两个文件的顺序是不是相反了呢:

http://img.mukewang.com/climg/5c494f900001922905910086.jpg

需要先引入tab.js,然后引入index.js,这样才能使用tab.js中的方法。

如果还有问题,建议将html文件中的代码也粘贴过来吧。

祝学习愉快!

0

0 学习 · 4826 问题

查看课程