体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

我想把购物车cart部分也像老师这样写，但是就是整不出来

来源：1-5 按需加载商品详情

10hours

2019-11-17 15:52:09

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

一直出现这样的问题，请老师解答

关键是index.js里面的132行-162行 我这样写一直报错 显示url undefined 为什么？

//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/index.css"> 
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/iconfont.css">
</head>
<body>
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl">
<a href="###" class="nav-site-login fl ">亲，请登录</a>
</li>
<li class="nav-site-signup fl link">免费注册</li>
    <li class="nav-site-mobile fl link">手机逛木桃</li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active='menu'>
<a href="#" target="_blank" class="dropdown-toggle link transition">我的木桃<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left transition">
<li><a href="#" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active='menu'>
<a href="#" target="_blank" class="dropdown-toggle link ">收藏夹<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left transition">
<li><a href="#" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="#" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<div class="menu dropdown fl" data-active='menu' data-load="../js/sell.json">
<a href="#" target="_blank" class="dropdown-toggle link ">卖家中心<i class="dropdown-arrow"></i></a>
<div class="dropdown-layer dropdown-left ">
<li class="dropdown-loading"></li> 

<!--  <ul>
<li><a href="#" target="_blank" class="menu-item">免费开店</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="#" target="_blank" class="menu-item">已卖出的宝贝</a></li>
</ul> -->
</div>
</div>
<li class="menu dropdown fl nav-site-service" data-active='menu'>
<a href="#" target="_blank" class="dropdown-toggle link ">联系客服<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-right transition">
<li><a href="#" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="#" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="header">
<div class="container">
<h1 class="fl"><a href="index.html" class="header-logo text-hidden">mutao</a></h1>
<!-- h1标签的使用有助于seo优化，就是方便网络爬虫在我们网页上爬取到重要信息，h1标签权重高，会优先被爬虫爬取。所以logo、重要信息等优先用h、em等标签包裹，但是这些标签不能过多 -->
<div id='header-search' class="header-search fl">
<form action="https://s.taobao.com/search" target="_blank" class='search-form'>
<input type="text" name="q" class="search-inputbox fl" placeholder="mutaogouwu" autocomplete="off">
<input type="submit" value="搜索" class="search-btn fl">
</form>
<ul class="search-layer">
<!-- <li class="search-layer-item text-ellipsis">东西很长要省略就用text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;</li>
<li class="search-layer-item">11</li>
<li class="search-layer-item">11</li> -->
</ul>
</div>
<div class="cart fr" id="cart" data-active='cart' data-load='../js/cart.json'>
<div class="cart-btn">
<i class="cart-logo iconfont icon-cart"></i>
<span class="cart-name">购物车</span>
<span class="cart-num">18</span>
<i class="cart-arrow iconfont icon-arrowdown"></i>
</div>
 
<ul class="dropdown-layer cart-layer" >
 
  <li class="dropdown-loading"></li> 
<!-- <li><a href="#" target="_blank" class="dropdown-layer-item">1111</a></li>
<li><a href="#" target="_blank" class="dropdown-layer-item">2222</a></li>  -->
<!-- <li class="dropdown-layer-title cart-layer-title">新加入的商品</li> -->
  <!--<li class="drodown-layer-item cart-layer-item">
<img src="../img/cart/1.png" alt="#" class="fl">
<div class="item-detail fl">
<span class="item-detail-up">adidas 阿迪达斯训练 男子</span><br/>
<span class="item-detail-down"><b>￥355X1</b></span>
</div>
<span class="item-close fr"><a href="#">×</a></span>
               </li> -->
               <!-- <li class="item-total">
                <span class="total-price fl">共<b>0</b>件商品 共计<b>￥ 0.00</b></span>
                <div class="GoCartBtn fr">去购物车</div>
               </li> -->
</ul>
</div>
 
</div>
</div>
</div>
<div class="nav-main">
<div class="container">
<a href="#" class="link">团购</a
><a href="#" class="link">天黑黑</a
><a href="#" class="link">名品汇</a
><a href="#" class="link">发现</a
><a href="#" class="link">二手特价</a
><a href="#" class="link">数码城</a>
</div>
</div>
<div class="focus">
<div class="container">
<div class="category fl">
<a href="#" target="_blank" class="category-title"><i class="iconfont">&#xe631;</i>商品分类</a>
<ul class="category-list">
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-1.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class=" dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-2.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-3.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-4.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-5.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-6.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-7.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-8.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-9.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-10.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-11.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-12.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-13.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<dl class="category-details cf"><!-- 清除浮动避免高度塌陷 -->
<dt class="category-details-title fl"><a href="#" target="_blank">手机通讯</a></dt>
<dd class="category-details-item fl">
<a href="#" class="link">手机</a
><a href="#" class="link">对讲机</a
><a href="#" class="link">以旧换新</a>
</dd>
</dl>
<dl class="category-details cf">
<dt class="category-details-title fl"><a href="#" target="_blank">手机通讯</a></dt>
<dd class="category-details-item fl">
<a href="#" class="link">手机</a
><a href="#" class="link">对讲机</a
><a href="#" class="link">以旧换新</a>
</dd>
</dl>
<dl class="category-details cf">
<dt class="category-details-title fl"><a href="#" target="_blank">手机通讯</a></dt>
<dd class="category-details-item fl">
<a href="#" class="link">手机</a
><a href="#" class="link">对讲机</a
><a href="#" class="link">以旧换新</a>
</dd>
</dl>
</div>
</li>
<li class="category-dropdown" data-active='category' data-load='../js/category.detail-json/category-detail-14.json'>
<div class="category-dropdown-toggle">
<a href="#" target="_blank" class="dropdown-link">家用电器</a>
<i class="category-dropdown-arrow">&gt;</i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
</ul>
</div>
<div class="carousel fl"></div>
<div class="focus-right fr"></div>
</div>

</div>
<script src="../js/jquery.js"></script> 
<script >
window.jQuery || document.write('<script src="../js/jquery.js"><\/script>')
</script>
<!-- <script src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></script> -->
<script src="../js/transition.js"></script>
<script src="../js/showHide.js"></script>
<script src="../js/dropdown.js"></script>
<script src="../js/search.js"></script>
<script src="../js/index.js"></script>
</body>
</html>
//index.css
/* nav-site */
	.nav-site{
		width: 100%;
		background: #f3f5f7;
	}
	.nav-site .container{
		border-bottom: 1px solid #cdd0d4;
		height: 44px;
		line-height: 44px;
	}
	.nav-site-login{
		color: #f01414;
		margin-left: 15px;
	}
	.nav-site-signup{
		margin-left: 10px;
	}
	.nav-site-mobile{
		margin-left: 10px;
	}
	.nav-site-service{
		margin-right: 15px;
	}
	.nav-site-category{
		margin: 0 10px;
	}
/* nav-main */
	.nav-main{
		width: 100%;
		background-color: #07111b;
		font-size: 13px;
		margin-top: 45px;
		height: 48px;
	}
	.nav-main a{
		padding: 0 25px;
		color: #e9e9ea;
		line-height: 48px;
	}
	.nav-main a:nth-child(1){
		margin-left: 208px;
	}
/* header */
	.header{
		height: 124px;
		width: 100%;
		background: #f3f5f7;
	}
	.header-logo{
		display: block;
		width: 136px;
		height: 48px;
		background: url(../img/header-logo.png) no-repeat;
		margin-left: 15px;
	}
/* header-search */
	.header-logo,.header-search,.cart{
		margin-top: 36px;
	}
	.header-search {
		position: relative;
		border: 1px solid #cfd2d5;
		margin-left: 144px;
	}
	.search-inputbox {
		width: 585px;
		height: 40px;
		border: 0;
		padding: 0 10px;
		border: none;
	}
	.search-btn {
		width: 73px;
		height: 40px;
		background: #07111b;
		font-size: 12px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		border: none;
		cursor: pointer;
	}
	.search-layer {
		position: absolute;
		top: 100%;
		width: 100%;
		left: -1px;
		background: #fff;
		border: 1px solid #cfd2d5;
	}
	.search-layer-item {
		padding: 0 10px;
		color: #333;
		height: 24px;
		line-height: 24px;
		cursor: pointer;
	}

	.search-layer-item:hover{
		background-color: #f3f5f7;
	}
/* cart */
    .cart-name:after,.cart-logo,.cart-name,.cart-num{
        color: #ffffff;
    }
    .cart{
        margin-left: 49px;
        position: relative;
        color: #fff;
    }
    .cart-btn{
        height: 14px;
        width: 159px;
        background-color: #f01414;
        padding: 13px 0 15px 0;
        cursor: pointer;
        z-index: 10;
        position: relative;
        margin-top: 2px;
    }
    .cart-name:after{
        content: '|'!important;
        margin: 0 10px;
        font-size: 13px;
    }
    .cart-logo{
        margin: 0 13px;
        font-size: 14px;
    }
 
    .icon-arrowdown:before {
        font-size: 12px;   
        margin-left: 5px;
    }
    .cart-layer{
        background: #fff;
        top: -10px;
        right: 0;
        position: absolute;
        width: 320px; 
        padding-left: 15px;
        overflow: scroll!important;
        z-index: 2!important;
    }
    .cart-layer-item{
        height:20px;
        width: 80px;
        background: #fff;  
    }
     
    .cart-btn:hover{
        background:#fff;
    }
    .cart:hover .cart-btn{
        background:#fff;
    }
    .cart-active .cart-logo,
    .cart-active .cart-name:after,
    .cart-active .cart-name,
    .cart-active .cart-num,
    .cart-active .cart-arrow{
        color: #f01414
    }
    .cart-layer-title{
        color: #07111b;
        font-size: 12px;
        height: 52px;
        line-height: 52px;
        padding-left: 24px;
    }
    .cart-layer-item,.cart .item-total{
        height: 64px;
        width: 280px;
        margin: 0 12px;
        border-top: 1px solid #d9dde1;
    }
    .cart-layer-item img{
        margin-top: 12px;
    }
    .cart .item-detail{
        margin-left: 13px;
        padding-top: 16px;
    }
    .cart .item-close {
    	color: #07111b;
    }
    .cart .item-detail span{
        display: block;
    }
    .cart-layer-item .item-close{
        font-size: 20px;
    }
    .cart .dropdown-loading{
        margin:30px 50px 40px 140px;
    }
    .cart .item-total{
        line-height: 64px;
   } 
   .cart .item-total .total-price{
        margin-left: 15px;
   }
   .cart .item-total .GoCartBtn{
        height: 35px;
        width: 80px;
        background-color: #f01414;
        line-height: 35px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        margin-top: 15px;
        border-radius: 3px;
   }
/* dropdown */
	.dropdown{
		position: relative;
	}
	.dropdown-toggle{
		display: block;
		height: 100%;
		padding: 0 16px 0 12px; /*top right bottom left*/
		border-left: 1px solid #f3f5f7;
		border-right: 1px solid #f3f5f7;
		position: relative;
		z-index: 2;
	}
	.dropdown-arrow{
		background: url(../img/dropdown-arrow.png) no-repeat left center;
		height: 6px;
		width: 8px;
		display: inline-block;
		margin-left: 8px;
		vertical-align: center;
	}
	.dropdown-left{
		left: 0;
		right: auto;
	}
	.dropdown-right{
		right: 0;
		left: auto;
	}
	.dropdown-layer{
		position: absolute;
		display: none;
		top: 43px;
		background: #ffffff;
		border:1px solid #cdd0d4;
		z-index: 15;
		overflow:hidden;
	}
	.menu-item{
		height: 30px;
		line-height: 30px;
		padding: 0 12px;
		white-space: nowrap;
		color: #8a8e93;
		display: block;
	}
	.menu-item:hover{
		background: #f3f5f7;
	}
	.menu-active .dropdown-toggle{
	background: #ffffff;
	border-color:  #cdd0d4;
	}
	.menu-active .dropdown-arrow{
		background: url(../img/dropdown-arrow-active.png) no-repeat;
	}
/*showHide*/
	.transition{
		-o-transition:all 0.5s;
		-ms-transition:all 0.5s;
		-moz-transition:all 0.5s;
		-webkit-transition:all 0.5s;
		transition: all 0.5s;
	}
	.fadeOut{
			opacity: 0!important;
			visibility: hidden!important;
		}
	.SlideUpDownCollapse{
		height: 0!important;/* 设置更高优先级 */
		padding-top: 0!important;
		padding-bottom:0!important;
	}
	.SlideLeftRightCollapse{
		width: 0!important;
		padding-left: 0!important;
		padding-right: 0!important;
	}
	.dropdown-loading{
		width: 32px;
		height: 32px;
		margin: 20px;
		background: url(../img/loading.gif) no-repeat;
	}
/* focus */
.focus{
	width: 100%;
	height: 504px;
	margin-top: 8px;
	background-color: #eee;
}
//common.css
/* 公共样式 */
	.container{
		width: 1200px;
		margin: 0 auto;
	}

	.link{
		color: #4d555d;
	}
	.link:hover{
		color: #f01414;
	}
	.text-hidden{
	text-indent: -9999px;
	overflow: hidden;
}
	.text-ellipsis{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

/* category */
	.category{
		margin-top: -62px;
		width: 208px;
		position: relative;
	}
	.category .dropdown{
		position: static;/* 取消相对定位 */
	}
	.category .iconfont{
		margin-right: 10px;
	}
	.category .dropdown-loading{
		margin: 220px auto;
	}
	.category-title{
		display: block;
		padding: 0 20px;
		line-height: 54px;
		height: 54px;
		font-size: 14px;
		color: #fff;
		background-color: #f01414;
	}
	.category-list{
		background-color: #f01414;
		height: 512px;
	}
	.category .dropdown-link{
		padding: 0 15px;
		color: #fff;
		line-height: 36px;
		height: 36px;
	}
	.category-dropdown-arrow{
		color: #fff;
		float: right;
		margin: 12px 12px 0 0;
		font-family: simsun;
		font-weight: bold;
	}
	.category-active .category-dropdown-toggle{
		background-color: #fff;
	}
	.category-active .category-dropdown-arrow,
	.category-active .dropdown-link{
		color: #f01414;
	}
	.category .dropdown-layer{
		width: 744px;
		min-height: 473px;
		top:54px;
		left: 100%;
		padding: 8px 0 31px 0;
		background-color: #fff;
		box-shadow: 0 0 5px rgba(0,0,0,0.2);
	}
	.category-details{
		line-height: 20px;
		margin-top: 24px !important;
	}
	.category-details-title{
		width: 84px;
		padding-right: 16px;
		border-right: 1px solid #d9dde1;
		text-align: right;

		font-weight: bold;
	}
	.category-details-title a{
		color: #07111b;		
	}
	.category-details-item{
		width: 592px;
		padding-left: 15px;
	}
	.category-details-item a{
		margin-right: 15px;
		display: inline-block;/* 
		设置成内联块 这样换行就不会拆分a里面的内容 */
	}
//transtion.js
//transition 兼容性问题
(function(){
	var transitionEndName = {
		transition:'transitionend',
		Moztransition:'transitionend',
		Webkittransition:'WebkitTransitionEnd',
		OTransition:'otransitionend'
	}
	var transitionEnd='',
	    isSupport = false;
;
	for (name in transitionEndName){
		if( document.body.style[name] !== undefined){
			transitionEnd = transitionEndName[name];
			isSupport = true;
			break;
		}
	}

	window.mt = window.mt || {};
	window.mt.transition = {
		end:transitionEnd,
		isSupport:isSupport
	}
})();
//showhide.js
(function ($) {
	'use strict';

		var transition = window.mt.transition ;

		function init($elem,hiddenCallback){//init函数 给Box一个初始状态（status) hidden/show
			if($elem.is(':hidden')){//:hidden 是jquery中的选择器，选取隐藏的元素。经过测试 没有:shown
				$elem.data('status','hidden');
				if(typeof hiddenCallback === 'function') hiddenCallback();
			}else {
				$elem.data('status','shown');
			}
		}
		function show($elem,callback){
			if($elem.data('status') ==='show') return;
			if($elem.data('status') ==='shown') return;
			$elem.data('status','show').trigger('show');
			callback();
		}
		function hide($elem,callback){
			if($elem.data('status') ==='hide') return;
			if($elem.data('status') ==='hidden') return;
			$elem.data('status','hide').trigger('hide');
			callback();
		}
		var slient ={
					init:init,
					show:function($elem){
						show($elem,function(){
							$elem.show();
						    $elem.data('status','shown').trigger('shown');
						})
						
					},
					hide:function($elem){
						hide($elem,function(){
							$elem.hide();
						    $elem.data('status','hidden').trigger('hidden');
						})

					}
				};
		var css3 ={
						fade:{
							init:function($elem){
								css3._init($elem,'fadeOut');
							},
							show:function($elem){
								css3._show($elem,'fadeOut'); 
							},
							hide:function($elem){
								css3._hide($elem,'fadeOut');
						    }
					        },
						slideUpDown:{
							init:function($elem){
								$elem.height($elem.height());//p标签撑开不会提供高度 height方法为box提供高度
								css3._init($elem,'SlideUpDownCollapse');
						    },
						
							show:function($elem){
								css3._show($elem,'SlideUpDownCollapse');
							},
							hide:function($elem){
								css3._hide($elem,'SlideUpDownCollapse');
						    }
					    },
						slideLeftRight:{
							init:function($elem){
								$elem.width($elem.width());
								css3._init($elem,'SlideLeftRightCollapse');
							},
							show:function($elem){
								css3._show($elem,'SlideLeftRightCollapse'); 
							},
							hide:function($elem){
								css3._hide($elem,'SlideLeftRightCollapse');
						    }
					    },
						fadeSlideUpDown:{
							init:function($elem){
								$elem.height($elem.height());//p标签撑开不会提供高度 height方法为box提供高度
								css3._init($elem,'fadeOut SlideUpDownCollapse');
						    },
						
							show:function($elem){
								css3._show($elem,'fadeOut SlideUpDownCollapse');
							},
							hide:function($elem){
								css3._hide($elem,'fadeOut SlideUpDownCollapse');
						    }
						},
							fadeSlideLeftRight:{
								init:function($elem){
									$elem.width($elem.width());//p标签撑开不会提供高度 height方法为box提供高度
									css3._init($elem,'fadeOut SlideLeftRightCollapse');
							    },
							
								show:function($elem){
									css3._show($elem,'fadeOut SlideLeftRightCollapse');
								},
								hide:function($elem){
									css3._hide($elem,'fadeOut SlideLeftRightCollapse');
							    }
						},
			};

		css3._init = function($elem,className){
			$elem.addClass('transition');
			init($elem,function(){
				$elem.addClass(className);
			})
			}
		css3._show = function($elem,className){
			show($elem,function(){
					$elem.off(transition.end).one(transition.end,function(){//one只绑定一次，避免多次绑定
					$elem.data('status','shown').trigger('shown');//触发shown事件 
				    })
				$elem.show();
				setTimeout(function(){
					$elem.removeClass(className);
				},20) //异步处理 避免同时发生
				})
			}
		css3._hide=function($elem,className){
			hide($elem,function(){
			    $elem.off(transition.end).one(transition.end,function(){//transistionend方法 等动画结束执行
			        $elem.hide();
			        $elem.data('status','hidden').trigger('hidden');
			    })
			    $elem.addClass(className);
			})
		}
		var js = {
			fade:{
				init:function($elem){
					js._init($elem);
				},
				show:function($elem){
					js._show($elem,'fadeIn');
				},
				hide:function($elem){
			        js._hide($elem,'fadeOut');
				}
			},
			SlideUpDown:{
				init:function($elem){
					js._init($elem);
				},
				show:function($elem){
					js._show($elem,'slideDown');
				},
				hide:function($elem){
			        js._hide($elem,'slideUp');
				}
			},
			SlideLeftRight:{
				init:function($elem){
						js._customInit($elem,{
							'width':0,
							'padding-left':0,
							'padding-right':0
						})
					},
				
				show:function($elem){
						js._customerShow($elem);
					},
				
				hide:function($elem){
					hide($elem,function(){
							
							$elem.stop().animate({
								'width':0,
								'padding-left':0,
								'padding-right':0
							},
							function(){
								$elem.hide();
								$elem.data('status','hidden').trigger('hidden');
							})
							//show() hide() 顺序问题 show()先撑开再推动 hide()先推动再关闭
					})
				}
		    },
		    fadeSlideUpDown:{
		    	init:function($elem){
						js._customInit($elem,{
							'opacity' :0,
							'height':0,
							'padding-top':0,
							'padding-bottom':0
						})
					},
				
				show:function($elem){
					js._customerShow($elem);
				},
				hide:function($elem){
					hide($elem,function(){
							
							$elem.stop().animate({
								'opacity' :0,
								'height':0,
								'padding-top':0,
								'padding-bottom':0
							},
							function(){
								$elem.hide();
								$elem.data('status','hidden').trigger('hidden');
							})
							//show() hide() 顺序问题 show()先撑开再推动 hide()先推动再关闭
					})
				}
		    },
		    fadeSlideLeftRight:{
		    	init:function($elem){
						js._customInit($elem,{
							'opacity' :0,
							'width':0,
							'padding-left':0,
							'padding-right':0
						})
					},
				
				show:function($elem){
					js._customerShow($elem);
				},
				hide:function($elem){
					js._customHide($elem,{
							'opacity' :0,
							'width':0,
							'padding-left':0,
							'padding-right':0
						});
				}
		    }
		    };
		js._init =function($elem,hiddenCallback){
			$elem.removeClass('transition');
			init($elem,hiddenCallback);
		}
		js._customInit =function($elem,options){ //自定义初始化函数

			var styles={};
			for(p in options){
				styles[p]=$elem.css(p);
			}
			$elem.data('styles',styles);//用于存储最初box的sytles数据

			js._init($elem,function(){
				$elem.css(options);
			})
		}
		js._show =function($elem,mode){
			
			show($elem,function(){
				$elem.stop()[mode](function(){//fadeIn结束后执行该函数 触发shown stop()方法是jquery封装的 用于停掉之前的动画 避免重叠
					$elem.data('status','shown').trigger('shown');
				})
		})
		};
		js._customerShow=function($elem){

			show($elem,function(){

					$elem.show();
					$elem.stop().animate($elem.data('styles'),
					function(){
						$elem.data('status','shown').trigger('shown');
					})
			})
		};
		js._hide = function($elem,mode){
			hide($elem,function(){
				$elem.stop()[mode](function(){
					$elem.data('status','hidden').trigger('hidden');
				})
			})
		};
		js._customHide=function($elem,options){
			hide($elem,function(){
					
					$elem.stop().animate(options,
					function(){
						$elem.hide();
						$elem.data('status','hidden').trigger('hidden');
					})
					//show() hide() 顺序问题 show()先撑开再推动 hide()先推动再关闭
			})
		};


        var defaults ={
        	css3:false,
        	js:false,
        	animation:'fade'
        }

/*        function showHide($elem,options){
        	options = $.extend({},default,options);

        	if(options.css3 && transistion.isSupport){//css3 transition
        		css3[options.animation].init($elem);
        		return{
        			show:css3[options.animation].show,
        			hide:css3[options.animation].hide
        		}
        	}else if(options.js){//js animation
        		js[options.animation].init($elem);
        		return{
        			show:js[options.animation].show,
        			hide:js[options.animation].hide
        		}
        	}else{
        		slient.init($elem);
        		return{
        			show:slient.show,
        			hide:slient.hide
        	}
        }
    }*/
    function showHide($elem,options){//修改版

        	var mode =null;
        	if(options.css3 && transition.isSupport){//css3 transition
        		mode=css3[options.animation];//css3.fade()
        	}else if(options.js){//js animation
        		mode=js[options.animation];
        	}else{
        		mode=slient;
        }
            mode.init($elem);
            return{//调用后返回对象
            	show:$.proxy(mode.show,this,$elem),//proxy方法用来改变this指向，这里仅用于传参
            	hide:$.proxy(mode.hide,this,$elem)
            }
    }

   /* window.mt = window.mt ||{};
    window.mt.showHide =showHide;*/

    $.fn.extend({//为JQuery添加插件 showHide 
    	showHide:function(option){
    		return this.each(function(){//$box可能是数组 所以需要each遍历
    			var $this =$(this),
    			options = $.extend({},defaults,typeof option === 'object' && option),
    			mode = $this.data('showHide')//如果option是对象 传入option 如果option不是对象 返回False

    			if(!mode){//如果data为Null则为mode赋值 ，避免重复赋值
    				$this.data('showHide',mode =showHide($this,options));//mode 纸行showHide函数 return返回show hide
    			}
    			
    			if(typeof mode[option] ==='function'){//如果传入字符串'show','hide' 则mode.hide() mode=showHide($this,options)
    				mode[option]();//showHide.show() 使用[]是因为传入字符串'show'
    			
    			}
    		})
    	}
    })
})(jQuery);
//dropdown.js
(function($){
	'use strict';

	function Dropdown(element,option){
		this.$elem = $(element),//使用this指向dropdown 让Dropdown.prototype.show也能共用 如果用var 只能是局部变量 外部（Dropdown.prototype.show）无法访问
		this.option = option, //外部也能调用
		this.$layer=this.$elem.find('.dropdown-layer'),
		this.activeClass = option.active +'-active';
		

		this._init();
		
	}
	Dropdown.prototype._init =function(){
		var self =this;//变量self 存储dropdown对象 避免下面this指向this.$elem(dom元素)
		this.$layer.showHide(this.option);//调用showhide 传入option
		this.$layer.on('show shown hide hidden',function(e){//showHide 117行触发shown 所以才能绑定!
			self.$elem.trigger('dropdown-'+e.type,function(){
				self.$layer.height('auto')
				.height(self.$layer.height()-100);
			});
		})
		var DEFAULTS ={//默认参数 
			css3:false,
			js:false,
			animation:'fade',
			delay:0,
			active:'dropdown'
		}
		
		
		if(this.option.event === 'click'){
			this.$elem.on('click',function(e){
				console.log(e);//e保存事件类型 
				self.show(); //相当于Dropdown.show();
				e.stopPropagation();//阻止该事件（'click'）冒泡
			});
			$(document).on('click',function(){
				self.hide();
			})
		}else{
			this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));//$.proxy方法改变this指向
		}
	}

	Dropdown.prototype.show =function(){
		var self = this;
		if(this.option.delay){
			this.timer =setTimeout(function(){//里面的this需要改成self 否则指向window
				_show();
			},this.option.delay)
		}else{
				_show();
		}
		function _show(){
			self.$layer.showHide('show');
			self.$elem.addClass(self.activeClass);
		}
		
	};
	Dropdown.prototype.hide = function(){
		if(this.option.delay){
			clearTimeout(this.timer);//清除 否则还会触发setTimeout 
		}
		this.$layer.showHide('hide');
		this.$elem.removeClass(this.activeClass);
	};
/*	var dropdown = new Dropdown();//不在函数内部创建对象 避免多次实例化造成性能浪费 所以采用原型


	dropdown.show();
	dropdown.hide();
*/



	/*function dropdown(element,option){
			var $elem = $(element),
			    $layer=$elem.find('.dropdown-layer'),
			activeClass = $elem.data('active')+'-active';

			$layer.showHide(option);

			$elem.hover(function(){
			$layer.showHide('show');
			$elem.addClass(activeClass);
		},function(){
			$layer.showHide('hide');
			$elem.removeClass(activeClass);
		})
		}*/

		/*var defaults = {//默认参数 如果外部没有传 使用默认
			css3:false,
			js:false,
			animation:'fade'
		}*/
		$.fn.extend({
			dropdown:function(option){//在html 传入的option有可能是对象object{} 也有可能是字符串'string'
				return this.each(function(){
					var $this=$(this),//存储变量 避免重复调用
					    dropdown=$this.data('dropdown'),//创建data数据
					    options = $.extend({},Dropdown.DEFAULTS,$this.data(),typeof option === 'object' 
						&& option)//判断传入的是不是对象 如果是就进行覆盖
					/*dropdown(this,options);*/

					if(!dropdown){ //判断是不是空的 如果是就实例化
						$this.data('dropdown',dropdown = new Dropdown(this,options))//xxx = new object 立即执行Dropdown)//use data to 存储dropdown 避免每次调用函数多次实例化
					}
					if (typeof dropdown[option] === 'function'){//判断是不是函数 是就执行
						dropdown[option]();// 因为传入option是字符串 所以用[option]
					}
				})
			}
		})
		
})(jQuery)//$参数接收jquery 防止受外部影响 其实意义不大
//index.js 
(function($){


//menu
	$('.menu').on('dropdown-show',function(e){
		loadOnce($(this),buildMenuItem)
		
			}).dropdown({
				css3:true,
				js:false,
				delay:0,
				animation:'slideUpDown'
			});

	
	function buildMenuItem($elem,data){
		var html='';
		if(data.length === 0) return;

		setTimeout(function(){
				for(var i=0;i<data.length;i++){
				html +='<li><img src="'+data[i].name+'"/><a href="'+data[i].url+'" target="_blank" class="menu-item">'+data[i].url+'</a></li>';
					}
				$elem.find('.dropdown-layer').html(html);
			},1000);
	}
//head-search
    var $headerSearch =$('#header-search');
	var html='',
        maxNum=10;
	$headerSearch.on('search-getData',function(e,data,$layer){
		var $this =$(this)

		/*$layer.html(html);*/
		html= createHeaderSearchLayer(data,maxNum);
		
		$this.search('appendLayer',html)

		if(html){
			$this.search('showlayer')//if (typeof search[option] === 'function')
		}else {
			$this.search('hidelayer')
		}
	   	
	}).on('search-noData',function(e,$layer){
		var $this =$(this);
		$this.search('hidelayer');		
		$this.search('appendLayer','')
	}).on('click','.search-layer-item',function(){//事件代理 用layer代理 search-layer-item 避免每次点击都绑定一次click
	   	  $headerSearch.search('setVal',$(this).html());
	   	  $headerSearch.search('submit',$(this).html());

	   })
	$headerSearch.search({
		autocomplete:true,
		css3:false,
		js:false,
		animation : 'slideUpDown',
		getDataInterval:200
	})
	function createHeaderSearchLayer(data,maxNum){
		var html='',
		    dataNum=data['result'].length,
		    maxNum=10;

		if(dataNum === 0){
			return ''
		}

		for(var i=0;i<dataNum;i++){
	   				if(i>=maxNum) break;
	   				html+='<li class="search-layer-item">'+data['result'][i][0]+'</li>';

	   			}
	    return html;
	    }  
//cart  购物车
     /*$('.cart').dropdown({
            css3:true,
            js:false,
            delay:0,
            animation:'slideUpDown',
            active:'cart'
        }).on('dropdown-show',function(e,updataLayer){
        var html='',
        $this=$(this),
        $layer=$this.find('.dropdown-layer'),
        Dataload=$this.data('load'),
        maxNum =5;


 
        if(!Dataload) return;
       $.getJSON(Dataload,function(data){
            if(!$this.data('loaded')){    
                setTimeout(function(){              
                    createCartLayer(data);
                    //调用
                    updataLayer();
                },1000)
                    $this.data('loaded',true)
                }else{
                    createCartLayer(data);
                }
            })


            function createCartLayer (data){

                for(var i=0;i<maxNum;i++){
                    html+= 
                    '<li class="drodown-layer-item cart-layer-item">'+
                        '<img src="'+data[i].url+'" alt="#" class="fl">'+
                        '<div class="item-detail fl">'+
                            '<span class="item-detail-up">'+data[i].name+'</span><br/>'+
                            '<span class="item-detail-down"><b>'+data[i].price+'</b></span>'+
                        '</div>'+
                        '<span class="fr"><a class="item-close" href="#">×</a></span>'+
                    '</li>'
                 }
                $layer.html('<li class="dropdown-layer-title cart-layer-title">新加入的商品</li>'+html+
                    '<li class="item-total">'+
                     '<span class="total-price fl">共<b>0</b>件商品 共计<b>￥ 0.00</b></span>'+
                     '<div class="GoCartBtn fr">去购物车</div>'+
                    '</li>');
            }
                

   })*/

          
	  $('.cart').on('dropdown-show',function(e,updataLayer){
	      loadOnce($(this),createCartLayer,updataLayer)
		});
	  $('.cart').dropdown({
	    css3:true,
	    js:false,
	    delay:0,
	    animation:'slideUpDown',
	    active:'cart'
	    })


      function createCartLayer ($elem,data){
      	console.log(data)
            for(var i=0;i<maxNum;i++){
                html+= 
                '<li class="drodown-layer-item cart-layer-item">'+
                    '<img src="'+ data[i].url +'" alt="#" class="fl">'+
                    '<div class="item-detail fl">'+
                        '<span class="item-detail-up">'+data[i].name+'</span><br/>'+
                        '<span class="item-detail-down"><b>'+data[i].price+'</b></span>'+
                    '</div>'+
                    '<span class="fr"><a class="item-close" href="#">×</a></span>'+
                '</li>'
             }
            $layer.html('<li class="dropdown-layer-title cart-layer-title">新加入的商品</li>'+html+
                '<li class="item-total">'+
                 '<span class="total-price fl">共<b>0</b>件商品 共计<b>￥ 0.00</b></span>'+
                 '<div class="GoCartBtn fr">去购物车</div>'+
                '</li>');
        }
         
 
 
    
//focus
	$('.category-dropdown').on('dropdown-show',function(e){
		loadOnce($(this),buildCateItem);
	}).dropdown({
			css3:true,
			js:false,
			delay:0,
			animation:'slideLeftRight',
			active:'category'
	})
	function buildCateItem($elem,data){
		var html='';
		if(data.length === 0) return;
		console.log(2)
		setTimeout(function(){
				for(var i=0;i<data.length;i++){
				html +='<dl class="category-details cf"><dt class="category-details-title fl"><a href="#" target="_blank">'+data[i].title+'</a></dt><dd class="category-details-item fl">'
					for(var j=0;j<data[i].items.length;j++){
						html += '<a href="#" class="link">'+data[i].items[j]+'</a>'
					}
					html +='</dd></dl>'
				}

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

/*	function loadOnce($elem,success){ 
	    Dataload=$elem.data('load');

	    if(!Dataload) return ;

		if(!$elem.data('loaded')){
			var html = '';
		    $elem.data('loaded',true);
			$.getJSON(Dataload).done(function(data){
			  if(typeof success ==='function') success($elem,data);
			}).fail(function(){
				$elem.data('loaded',false);
			})
		}
	}*/
		function loadOnce($elem,success,updataLayer){ 
		    Dataload=$elem.data('load');

		    if(!Dataload) return ;

			if(!$elem.data('loaded')){
				var html = '';
			    $elem.data('loaded',true);
				$.getJSON(Dataload).done(function(data){
				  if(typeof success ==='function') success($elem,data);
				
				  if(typeof updataLayer ==='function') success($elem,data);
				}).fail(function(){
					$elem.data('loaded',false);
				})
			}
		}
})(jQuery)
//cart.json
[
    {
    "name":"adidas 阿迪达斯训练 男子",
    "url":"../img/cart/1.png",
    "price":"￥355X1"
    },
    {
    "name":"玉兰油多效修护三部曲套装",
    "url":"../img/cart/2.png",
    "price":"￥199X1"
    },
    {
    "name":"Apple iPhone 7(A1666)",
    "url":"../img/cart/3.png",
    "price":"￥6188X1"
    },
    {
    "name":"飞利浦面条机 HR2356/31",
    "url":"../img/cart/4.png",
    "price":"￥659X4"
    },
    {
    "name":"罗技G29",
    "url":"../img/cart/5.png",
    "price":"￥2999X1"
    }
]


写回答

2回答

好帮手慕星星

2019-11-18

已采纳

同学你好，这是因为maxNum的值大于data.length的值，当循环变量i超过data.length值的时候，data[i].url不存在，所以会报undefined 。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0

好帮手慕星星

2019-11-17

同学你好，问题解答如下：

1、要对获取当前数据长度进行循环遍历，不是定义的maxNum变量值。

2、填充的是下拉层，但是$layer是个变量，不能直接使用，可以当前元素找到子元素下拉层。

针对上面两个问题修改如下：

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

3、获取数据是异步的，可以在更新下拉层高度的时候添加定时器，也变成异步，否则数据还没有加载进来，就会更新高度，没有内容。参考修改：

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

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0
h0hours
h for(var i=0;i<data.length;i++)老师我发现是这段代码写成了for(var i=0;i<maxNum;i++){ 明明是maxNum undefined 系统却报data.url undefined 这是为什么？
h019-11-18
共1条回复

0 学习 · 14456 问题

查看课程

相似问题

老师帮我看下为什么我的购物车下拉层会被轮播图挡住，应该如何修改

回答 2

这个老师讲的不是很好，这部分学的也不是很好，想知道是不是了解即可？

回答 1

感觉好难啊，都想要放弃了

回答 3

回答 2

视频里写服务区的icon样式时候，为什么不考虑公共样式里的icon样式取代了这里的样式

回答 1

打开慕课网App查看更多内容