购物车代码封装之前和之后的2个问题，希望老师能看完js代码后从实现效果原理的角度帮我分析下
HTML：
<div class="cart dropdown" data-active="cart" data-load="json/index.json"> <div class="dropdown-toggle transition"> <i class="gouwu-tubiao iconfont"></i><span class="gouwu">购物车</span><span class="jiange">|</span><span class="geshu">18</span><i class="dropdown-arrow icon-xjiantou iconfont transition"></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> <!--<i class="iconfont layer1-icon"></i><span class="layer1-zhuti">购物车里还没有商品<br>赶紧去选购吧</span>--> <!--<div class="layer-top">最新加入的商品</div> <div class="layer-connent"> <div class="layer-box"> <div class="layer-item clearfixed"> <img class="tupian fl" src="img/cart/1.png"> <div class="shanchu fr">X</div> <div class="wenzi">adidas 阿迪达斯 训练 男子<br>￥335*1</div> </div> …… </div> </div> <div class="layer-bottom clearfixed"> <div class="fl">共<span id="jianshu">15</span>件商品</div> <div class="fl">共计￥ <span id="qianshu">0</span>.00</div> <div>去购物车</div> </div>--> </div> </div>
css：
.cart{width: 128px;height: 12px;background-color: #f01414;padding: 15px;cursor: pointer;
position: fixed;left: calc(50% - 79px);top: 20%;}
.cart .dropdown-toggle{color: white;line-height: 12px;font-size: 12px;}
.gouwu{margin-left: 14px;}
.jiange,.geshu{margin-left: 10px;}
.icon-xjiantou{margin-left: 8px;}
.cart .dropdown-layer{background-color: white;box-shadow: 0px 5px 5px 5px #ccc;width: 320px;right: 0px;top: 42px;}
/**/
.cart .layer1-icon{line-height: 120px;color: #d9dde1;font-size: 30px;text-indent: 80px;display: inline-block;}
.cart .layer1-zhuti{font-size: 11px;line-height: 20px;color: #cbb2ab;position: absolute;top: 40px;left: 126px;}
/**/
.cart .layer-top{margin: 20px 30px 0px 24px;padding-bottom: 20px;border-bottom: 1px solid #d9dde1;color: #601142;}
.cart .layer-connent{width: 296px;height: 325px;margin-left: 24px;overflow: auto;}
.cart .layer-box{width: 266px;height: 975px;}
.cart .layer-item{width: 266px;height: 64px;border-bottom: 1px solid #d9dde1;position: relative;}
.cart .layer-item > .tupian{display: block;margin-top: 8px;}
.cart .layer-item > .shanchu{font-size: 14px;margin-top: 8px;margin-right: 14px;}
.cart .layer-item > .wenzi{position: absolute;top: 8px;left: 56px;font-size: 14px;line-height: 22px;}
.cart .layer-bottom{height: 64px;margin-left: 24px;margin-right: 28px;position: relative;font-size: 12px;}
.cart .layer-bottom div:first-of-type{margin-left: 10px;line-height: 64px;}
.cart .layer-bottom div:nth-of-type(2){margin-left: 10px;line-height: 64px;}
.cart .layer-bottom div:last-of-type{position: absolute;top: 16px;right: 0;
width: 80px;height: 36px;background-color: red;color: white;text-align: center;line-height: 36px;border-radius: 4px;}
/*交互*/
.cart-active{background-color: white;box-shadow: 0px 0px 5px 5px #ccc;}
.cart-active .dropdown-toggle{color: #f01414;}
.icon-xjiantou.dropdown-arrow.transition{transition: transform 1s;}公共css和transition模块、showHide模块跟老师一样
dropdown模块不一样的地方：（第一个问题中的代码在这里）
this.$layer.on("show shown hide hidden",function(event){
self.$elem.trigger('dropdown-'+event.type,function(){
self.$layer.height("auto")//为了购物车而添加
.height(self.$layer.height());
});//发送消息
});问题的重点：
没有封装之前的代码为什么需要更新下拉层的高度，否则当数据为空时显示高度为72px，而应该是120px。而封装之后的代码不需要更新下拉层的高度就效果是对的，请问是什么原因，不是很理解（起作用的代码：self.$layer.height("auto").height(self.$layer.height());我知道代码的含义是开始给下拉层设置高度为auto，然后再获取下拉层高度用height方法添加上，这样就是内容撑起来的高度，但是不知道为什么封装前后一个需要，一个不需要）
$this.data('loaded',true);为什么封装之前写在getJSON里面的最后，而封装之后老师写在了getJSON外面的前面，为了什么效果如此改变代码的位置？
需要老师看的代码：
$('.cart').on('dropdown-show',function(updataLayer){ loadOnce($(this), function($elem, data,updataLayer) { buildCartItem($elem,data,function(){ updateCart($elem, data); },updataLayer); }); }).dropdown({ css3: true, js: false }); function buildCartItem($elem,data,updataLayer) { var $layer=$elem.find('.dropdown-layer'), html=""; if(data.length==0){ setTimeout(function(){ html='<i class="iconfont layer1-icon"></i><span class="layer1-zhuti">购物车里还没有商品<br>赶紧去选购吧</span>'; $layer.html(html); updataLayer(); },1000); return; }else{ setTimeout(function(){//模拟服务器延迟 html+='<div class="layer-top">最新加入的商品</div><div class="layer-connent"><div class="layer-box">'; for(var i=0;i<data.length;i++){ html+='<div class="layer-item clearfixed"><img class="tupian fl" src="'+data[i].src+'"><div class="shanchu fr">X</div><div class="wenzi">'+data[i].wenzi+'<br>￥'+data[i].price+' X '+data[i].num+'</div></div>'; } html+='</div></div><div class="layer-bottom clearfixed"><div class="fl">共<span class="jianshu">45</span>件商品</div><div class="fl">共计￥ <span class="qianshu">0</span>.00</div><div>去购物车</div></div>'; $layer.html(html); updataLayer(); },1000); } } function loadOnce($elem,success,updataLayer){ 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'){ setTimeout(function(){ success($elem,data); updataLayer(); },200); } }).fail(function(){ $elem.data('loaded',false); }); } } function updateCart($elem, data) { var $cartNum = $elem.find('.geshu'), $cartTotalNum = $elem.find('.jianshu'), $cartTotalPrice = $elem.find('.qianshu'), dataNum = data.length, totalNum = 0, totalPrice = 0; if (dataNum === 0) {// no goods $cartNum.html("0"); return; }else{ 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); } }$('.cart').on('dropdown-show',function(event,updataLayer){ var $this=$(this); var dataLoad=$this.data('load'); if(!dataLoad)return; if(!$this.data('loaded')){ var $layer=$this.find('.dropdown-layer'), html="", count=0, jiage=0; //$layer.html('<div class="dropdown-loading"></div>'); $.getJSON(dataLoad,function(data){ if(data.length==0){ setTimeout(function(){ html='<i class="iconfont layer1-icon"></i><span class="layer1-zhuti">购物车里还没有商品<br>赶紧去选购吧</span>'; $layer.html(html); updataLayer(); },1000); return; }else{ setTimeout(function(){//模拟服务器延迟 html+='<div class="layer-top">最新加入的商品</div><div class="layer-connent"><div class="layer-box">'; for(var i=0;i<data.length;i++){ html+='<div class="layer-item clearfixed"><img class="tupian fl" src="'+data[i].src+'"><div class="shanchu fr">X</div><div class="wenzi">'+data[i].wenzi+'<br>￥'+data[i].price+'</div></div>'; count++; jiage+=Number(data[i].price); } html+='</div></div><div class="layer-bottom clearfixed"><div class="fl">共<span class="jianshu">'+count+'</span>件商品</div><div class="fl">共计￥ <span class="qianshu">'+jiage+'</span>.00</div><div>去购物车</div></div>'; $layer.html(html); updataLayer(); },1000); } $this.data('loaded',true);//这里 }); } });
源自： 实战：搜索功能组件化
3-5 自由编程
28
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星