小米购物车总结

abstract：//cart.js$(function(){ $('.allsele').click(function(){ //判断全选样式 if($(this).children().hasClass('noselec')){ $(this).children().removeClass('noselec'); $(this).children().

QQ截图20190607164151.png

//cart.js

$(function(){

$('.allsele').click(function(){

//判断全选样式

if($(this).children().hasClass('noselec')){

$(this).children().removeClass('noselec');

$(this).children().css('color','#ff6100');

//给子项加样式

$('.seleitem').children().removeClass('cartitemselec')

$('.seleitem').children().css('color','#ff6100');

//调用 selec函数，实现计算金额

var len=$('.seleitem').length;

selec(1,'.seleitem',len);

}else{

$(this).children().addClass('noselec');

$(this).children().css('color','');

$('.seleitem').children().addClass('cartitemselec')

$('.seleitem').children().css('color','');

var len=$('.seleitem').length;

selec(0,'.seleitem',len);

}

})

$('.seleitem').click(function(){

if($(this).children().hasClass('cartitemselec')){

$(this).children().removeClass('cartitemselec');

$(this).children().css('color','#ff6100');

selec(1,this);//调用 selec函数，实现seleitem计算金额

//seleitem子项判断是否全选

var elem=$(this).parents('.cartitem').siblings('.cartitem')

var len=elem.length;

var has=[];

for(var i=0;i<len;i++){

has[i]=elem.eq(i).find('.fa-check').hasClass('cartitemselec');

}

//inArray函数判断fa-check是否全有cartitemselec属性，全有代表全选，否则不能自动全选

if($.inArray(true,has)<0){

$(this).parents('.carshop').find('.allsele').children().removeClass('noselec');

$(this).parents('.carshop').find('.allsele').children().css('color','#ff6100');

}

}else{

$(this).children().addClass('cartitemselec');

$(this).children().css('color','');

$(this).parents('.carshop').find('.allsele').children().addClass('noselec');

$(this).parents('.carshop').find('.allsele').children().css('color','');

selec(0,this);

}

})

//点选增加数量

$('.add').click(function(){

var num=parseInt($(this).siblings('input').val());

num+=1;

$(this).siblings('input').val(num);

subtotle(num,this);

if(!$(this).parents('.cartitem').find('.fa-check').hasClass('cartitemselec')){

console.log(999);

totle=3199+parseFloat($('.totleNum').html());

$('.totleNum').html(totle);

}

})

//点选减少数量

$('.reduce').click(function(){

var num=parseInt($(this).siblings('input').val());

if(num>1){

num-=1;

$(this).siblings('input').val(num);

subtotle(num,this);

if(!$(this).parents('.cartitem').find('.fa-check').hasClass('cartitemselec')){

console.log(999);

totle=parseFloat($('.totleNum').html())-3199;

$('.totleNum').html(totle);

}

})

//获取每项金额加入到总金额

function subtotle(a,tag){

// console.log(a);

var totle=a*3199;

$(tag).parents('.cartitem').find('.amounts').html(totle+'元');

return totle;

}

//获取总金额

function selec(a,tag,len=0){

var sprice=0;

var snum=0;

if(len>0){

$('.subamount').html(2);

for(var i=0;i<len;i++){

sprice+=parseFloat($(tag).eq(i).parents('.cartitem').find('.amounts').html());

}

if(len==0){

sprice=parseFloat($(tag).parents('.cartitem').find('.amounts').html());

}

var subamount=parseFloat($('.subamount').html());

var stotle=parseFloat($('.totleNum').html());

if(a==1){

subamount+=1;

$('.subamount').html(subamount+'');

$('.totleNum').html(stotle+sprice+'');

}

if(a==0){

subamount-=1;

$('.subamount').html(subamount+'');

$('.totleNum').html(stotle-sprice);

}

})

//cart.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2 class="fl">我的购物车</h2>

<span class="fl">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>

<div class="fl">我是某某某&nbsp&nbsp&nbsp<i class="fa fa-angle-down fa-1x"></i></div>

</div>

</div>

<span class="allsele"><i class="fa fa-check noselec"></i>&nbsp&nbsp&nbsp&nbsp全选</span>

</div>

<span class="waresname">小米MIX 2S 全网通版 6GB内存陶瓷标准版 64G...</span>

</span>

</div>

<span class="waresname">小米MIX 2S 全网通版 6GB内存陶瓷标准版 64G...</span>

</span>

</div>

<span class="waresname">小米MIX 2S 全网通版 6GB内存陶瓷标准版 64G...</span>

</span>

</div>

继续购物 <span style="margin:0px 20px;color:#ccc">|</span>共 <span>3</span> 件商品，已选择 <span class="subamount">0</span> 件

</div>

</div>

<span>买购物车中商品的人还买了</span>

</span>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

</div>

<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>

<a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</a><span></span>

<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>

<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

<dd><a href="#">授权体验店</a></dd>

</dl>

<dl>

<dd><a href="#">投资者关系</a></dd>

</dl>

<dl>

</dl>

<dl>

</dl>

<p class="timer">周一至周日 8:00-18:00<br>仅收市话费</p>

</div>

</div>

<ul>

<li>小米天猫店<span></span></li>

<li>Select Region</li>

</ul>

</div>

©mi.com 京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2014]0059-0009号违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

</div>

</div>

探索黑科技，小米为发烧而生！

</div>

</body>

</html>

Correcting teacher：查无此人Correction time：2019-06-10 09:42:04
Teacher's summary：完成的不错。学编程，先从模仿开始，继续加油。

小米购物车总结

Popular Entries