abstrakt：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style.css" /> <link rel="stylesheet&q
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style.css" />
<link rel="stylesheet" href="static/css/cart.css" />
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.css" />
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png" />
<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/js/cart.js" ></script>
<title>上傳錯(cuò)誤的html jquery更正重新上傳部分(錯(cuò)誤的將參考上傳)</title>
<style>
*{margin: 0;padding: 0;list-style: none;text-decoration: none;}
.clear{clear: both;}
body{background: #F5F5F5;}
.logo{display:inline-block;margin-top: 25px;float: left;}
.headerc{width: 100%;margin: 0 auto;border-bottom: 3px solid #FF8200;height: 100px;}
.content{width: 1226px;margin: 0 auto;}
.content-left,.title-h1,.title-h6{float: left;}
.content-left{width: 820px;float: left;}
.title-h1{font-size: 26px;font-weight: 400;color: #424242;line-height: 98px;}
.title-h6{font-size: 12px; font-weight: 400;line-height: 48px;margin-top: 32px;color: #757575;margin-left: 100px;}
.content-right{float: right;margin-top: 30px;margin-right: 30px;}
.ct-rbox1 a{font-size: 14px; line-height: 48px;color: #757575;}
.boder-onset{width: 1226px; margin: 50px auto;border: 1px solid #ccc;position: relative;}
.boder-poab{width:380px ;height: 50px;line-height: 50px;background: #F5F5F5;text-align: center;font-weight: 400;font-size: 25px;position: relative;top: -75px;left: 500px;}
.ct-rbox1{width: 120px;height: 48px;float: left;}
.my-shop{float: right;margin-left: 20px;}
.my-shop a{font-size: 14px; line-height: 48px;color: #757575;}
.ct-rbox1 a:hover{color: #FF8200;}
.ct-rbox1 i:hover{color: ;}
.sowaobox{color:#0288D1;font-weight:400;width: 100px;border: 1px solid #FF5722;text-align: center;background:#FF5722;line-height: 38px;font-size: 12px;cursor: pointer;display: none;position: relative;z-index: 999;border-radius: 5px;}
.ct-rbox1:hover .sowaobox{display: block;}
.sowaobox li:hover{background: #fff;}
/*shop商城*/
.mi-list-title div{height: 70px;line-height: 70px; font-size: 14px;}
.mi-trunt{width: 100%;background-color:#f5f5f5;overflow: hidden;}
.mi-cart{width: 1226px;margin: 0 auto;padding-top: 38px;}
.mi-cart>.mi-list{background-color: #fff;overflow: hidden;}
.mi-list div{float: left;}
.mi-cart .mi-select{width: 110px;text-align: center;}
.mi-cart .mi-select i{font-size: 13px;display:inline-block;height: 15px;width:15px;line-height: 15px;background-color:#fff;color:rgba(0,0,0,0);border:1px solid #e0e0e0;margin:0 15px 0 24px;cursor: pointer;}
.mi-cart .mi-select .rls{color: #fff;background: #FF5722;border: 1px solid #FF5722;}
.mi-cart .mi-good-img{width: 120px;cursor: pointer;}
.mi-cart .mi-good-img img{width: 60px; height: 60px;margin-top: 15px;}
/*text-overflow: ellipsis;文本超出顯示省略.....white-space: nowrap;文本內(nèi)內(nèi)容不換行*/
.mi-cart .mi-good-name{width: 380px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;cursor: pointer;font-size: 17px;color: #424242;}
.mi-cart .mi-good-price{width:75px;padding-right: 84px;text-align: right;}
.mi-cart .mi-good-num{width: 150px;text-align: center;}
.mi-good-num .num-input{width: 150px;height: 40px;padding: 0;margin-top:24px;padding-top: 1px;border: 1px solid #e0e0e0;}
.num-input button{width: 37px; height: 38px;text-align: center;line-height: 38px;color: #757575;font-size: 20px;background-color: #fff;border: none;}
.num-input button:hover{background-color: #e0e0e0}
.num-input .btn1{float: left;}
.num-input .btn2{float: right;}
.num-input .num-value{float: left;width: 72px;height: 38px;text-align: center;font-size: 16px;border: none;}
.mi-cart .mi-good-total-price{width: 120px;padding-right: 81px;text-align: right;color: #FF6A00;}
.mi-cart .mi-operation{width: 80px;padding-right: 26px;text-align: center;}
.mi-cart .mi-operation i{width: 20px;height: 20px;display:inline-block;border-radius: 10px;color:#757575;line-height: 20px;font-size: 12px;cursor:pointer;}
.mi-cart .mi-operation i:hover{background: #FF5722;color: #fff;}
/**/
.mi-list-item div{width: 86px;padding:15px 0;line-height: 86px;border-top:1px solid #e0e0e0;}
.mi-list-gogo{height: 50px;line-height: 50px;background: #fff;border-top: 20px solid #F5F5F5;}
.mi-list-gogo-left{float: left;}
.mi-list-gogo-right{float: right;}
.mi-list-gogo-right
.gogo-a a{width: 150px;display: inline-block;}
.gogo-a p{color: #ccc;font-size: 17px; display: inline-block;}
.gogo-all{font-size: 14px; color: #23262E;}
.gogo-endshop{float: left;font-size: 14px;}
.gogo-submit{width: 150px;line-height: 50px;display: inline-block;border: none;background-color: #FF6700;color: #fff;cursor: pointer;}
</style>
</head>
<body>
<
<div class="headerc">
<div class="content">
<div class="content-left">
<div class="clear"></div>
<a href="#" class="logo"><img src="static/images/footlogo.png" alt="" /></a>
<h1 class="title-h1"> 我的購(gòu)物車(chē)</h1>
<h6 class="title-h6">溫馨提示：產(chǎn)品是否購(gòu)買(mǎi)成功，以最終下單為準(zhǔn)哦，請(qǐng)盡快結(jié)算</h6>
</div>
<div class="content-right">
<div class="ct-rbox">
<div class="ct-rbox1">
<a href="#" class="biao-onc">我是某某某iS </a> <i class="fa fa-angle-down fa-1x biao-onc"></i>
<ul class="sowaobox">
<li class="sowao">個(gè)人中心</li>
<li class="sowao">評(píng)價(jià)曬單</li>
<li class="sowao">我的喜歡</li>
<li class="sowao">小米賬戶</li>
<li class="sowao">退出登錄</li>
</ul>
</div>
<div class="my-shop"><a href="#">我的訂單</a></div>
</div>
</div>
</div>
</div>
<!--shop商城-->
<div class="mi-trunt">
<div class="mi-cart">
<!--第一行的box-->
<div class="mi-list mi-list-title">
<div class="mi-select mi-select-all"><i class="fa fa-check" id="check-all"></i>全選</div>
<div class="mi-good-img"></div>
<div class="mi-good-name" style="font-size:14px;">商品名稱</div>
<div class="mi-good-price">單價(jià)</div>
<div class="mi-good-num">數(shù)量</div>
<div class="mi-good-total-price">小計(jì)</div>
<div class="mi-operation">操作</div>
</div>
<div class="mi-list mi-list-item">
<div class="mi-select"><i class="fa fa-check"></i></div>
<div class="mi-good-img"><img src="static/images/phone/phone1.png"></div>
<div class="mi-good-name" style="font-size:14px;"> 小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 64GB 白色 64GB</div>
<div class="mi-good-price">3199元</div>
<div class="mi-good-num">
<div class="num-input">
<button class="btn1">-</button>
<input type="text" / value="1" class="num-value">
<button class="btn2">+</button>
</div>
</div>
<div class="mi-good-total-price">3199元</div>
<div class="mi-operation"><i class="fa fa-times"></i></div>
</div>
<div class="mi-list mi-list-item">
<div class="mi-select"><i class="fa fa-check"></i></div>
<div class="mi-good-img"><img src="static/images/phone/phone1.png"></div>
<div class="mi-good-name" style="font-size:14px;"> 小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 64GB 白色 64GB</div>
<div class="mi-good-price">3199元</div>
<div class="mi-good-num">
<div class="num-input">
<button class="btn1">-</button>
<input type="text" / value="1" class="num-value">
<button class="btn2">+</button>
</div>
</div>
<div class="mi-good-total-price">3199元</div>
<div class="mi-operation"><i class="fa fa-times"></i></div>
</div>
<div class="mi-list mi-list-item">
<div class="mi-select"><i class="fa fa-check"></i></div>
<div class="mi-good-img"><img src="static/images/phone/phone1.png"></div>
<div class="mi-good-name" style="font-size:14px;"> 小米MIX 2S 全網(wǎng)通版 6GB內(nèi)存 陶瓷標(biāo)準(zhǔn)版 64GB 白色 64GB</div>
<div class="mi-good-price">3199元</div>
<div class="mi-good-num">
<div class="num-input">
<button class="btn1">-</button>
<input type="text" / value="1" class="num-value">
<button class="btn2">+</button>
</div>
</div>
<div class="mi-good-total-price">3199元</div>
<div class="mi-operation"><i class="fa fa-times"></i></div>
</div>
<div class="list mi-list-gogo">
<div class="mi-list-gogo-left">
<span class="gogo-a"><a href="#" style="font-size: 14px;color: #202020;"> 繼續(xù)購(gòu)物<p> |</p></a></span>
<span class="gogo-gong">共 <span class="gogo-all">0</span> 件商品，已選擇 <span class="gogo-jian">0</span> 件</span>
</div>
<div class="mi-list-gogo-right">
<div class="gogo-endshop">合計(jì): <span class="gogo-rmb">0</span> 元</div>
<a href="#"><button class="gogo-submit">去結(jié)算</button></a>
</div>
</div>
</div>
</div>
<!--買(mǎi)購(gòu)物車(chē)中商品的人還買(mǎi)了-->
<div class="clear"></div>
<div class="boder-onset"></div>
<div class="boder-poab">買(mǎi)購(gòu)物車(chē)中商品的人還買(mǎi)了</div>
<div class="contentPhone" style="width: 1226px;">
<div class="cp-sj-left"></div>
<div class="cp-sj-right" style="float: right;">
<div class="cp-sj-box">
<img class="pic-shopimg" src="static/images/buy/手機(jī)1.jpg" alt="">
<div style="width:100px;margin: 0 auto;">
<a href="#" style="position:absolute;z-index: 5;color: #aaa;">小米5X 4G+64G</a>
</div><br />
<div class="pt-div">光學(xué)變焦雙攝，拍人更美</div>
<div class="pt-div">1499元</div>
<div class="bg"></div>
</div>
<div class="cp-sj-box" style="margin-left: 11px;">
<img class="pic-shopimg" src="static/images/buy/手機(jī)2.jpg" alt="">
<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>
<p class="pic-shopdkj">大空間，快循環(huán)</p>
<p class="picshopPrice">
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div class="bg"></div>
</div>
<div class="cp-sj-box" style="margin-left: 11px;">
<img class="pic-shopimg" src="static/images/buy/手機(jī)3.jpg" alt="">
<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>
<p class="pic-shopdkj">大空間，快循環(huán)</p>
<p class="picshopPrice">
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div class="bg"></div>
</div>
<div class="cp-sj-box" style="margin-left: 10px;">
<img class="pic-shopimg" src="static/images/buy/手機(jī)4.jpg" alt="">
<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>
<p class="pic-shopdkj">大空間，快循環(huán)</p>
<p class="picshopPrice">
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div class="bg"></div>
</div>
<div class="cp-sj-box" style="margin-top: 7px;">
<img class="pic-shopimg" src="static/images/buy/手機(jī)5.jpg" alt="">
<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>
<p class="pic-shopdkj">大空間，快循環(huán)</p>
<p class="picshopPrice">
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div class="bg"></div>
</div>
<div class="cp-sj-box" style="margin-left: 11px;margin-top: 7px;">
<img class="pic-shopimg" src="static/images/buy/手機(jī)6.jpg" alt="">
<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>
<p class="pic-shopdkj">大空間，快循環(huán)</p>
<p class="picshopPrice">
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div class="bg"></div>
</div>
<div class="cp-sj-box" style="margin-left: 11px; margin-top: 7px;">
<img class="pic-shopimg" src="static/images/buy/手機(jī)7.jpg" alt="">
<h3 class="pic-shoptitle"><a href="#" >米家空氣凈化器Pro 白色 </a></h3>
<p class="pic-shopdkj">大空間，快循環(huán)</p>
<p class="picshopPrice">
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div class="bg"></div>
</div>
<div class="cp-sj-box" style="margin-left: 10px;margin-top: 7px;">
<img class="pic-shopimg" src="static/images/buy/手機(jī)8.jpg" alt="">
<h3 class="pic-shoptitle"><a href="#">米家空氣凈化器Pro 白色 </a></h3>
<p class="pic-shopdkj">大空間，快循環(huán)</p>
<p class="picshopPrice">
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div class="bg"></div>
</div>
</div>
</div>
<!--footer-->
<div class="clear"></div>
<div class="footers">
<div class="footer">
<div class="for-li" style="border-bottom: 1px solid #aaa;">
<a href="#"><i class="fa fa-wrench"> 預(yù)約維修服務(wù)</i><span>|</span></a>
<a href="#"><i class="fa fa-rotate-right"> 7天無(wú)理由退貨</i><span>|</span></a>
<a href="#"><i class="fa fa-refresh"> 15天免費(fèi)換貨</i><span>|</span></a>
<a href="#"><i class="fa fa-gift"> 滿150元包郵</i><span>|</span></a>
<a href="#"><i class="fa fa-map-marker"> 520余家售后網(wǎng)點(diǎn)</i></a>
</div>
</div>
</div>
<div class="for-li-1">
<div class="for-li-a">
<dl>
<dt>幫助中心</dt>
<dd>
<a href="#">賬戶管理</a>
</dd>
<dd>
<a href="#">購(gòu)物指南</a>
</dd>
<dd>
<a href="#">訂單操作</a>
</dd>
</dl>
<dl>
<dt>服務(wù)支持</dt>
<dd>
<a href="#">售后政策</a>
</dd>
<dd>
<a href="#">自助服務(wù)</a>
</dd>
<dd>
<a href="#">相關(guān)下載</a>
</dd>
</dl>
<dl>
<dt>線下門(mén)店</dt>
<dd>
<a href="#">小米之家</a>
</dd>
<dd>
<a href="#">服務(wù)網(wǎng)點(diǎn)</a>
</dd>
<dd>
<a href="#">授權(quán)體驗(yàn)店</a>
</dd>
</dl>
<dl>
<dt>關(guān)于小米</dt>
<dd>
<a href="#">了解小米</a>
</dd>
<dd>
<a href="#">加入小米</a>
</dd>
<dd>
<a href="#">投資者關(guān)系</a>
</dd>
</dl>
<dl>
<dt>關(guān)注我們</dt>
<dd>
<a href="#">新浪微博</a>
</dd>
<dd>
<a href="#">官網(wǎng)微博</a>
</dd>
<dd>
<a href="#">聯(lián)系我們</a>
</dd>
</dl>
<dl>
<dt>特色服務(wù)</dt>
<dd>
<a href="#">F碼通道</a>
</dd>
<dd>
<a href="#">禮物碼</a>
</dd>
<dd>
<a href="#">防偽查詢</a>
</dd>
</dl>
<div class="for-conten">
<p class="suorg">Feir-520-1314</p>
<p class="suorg-1">周一至周日 8:00-18:00<br />(僅收市話費(fèi))</p>
<button class="btn"><span class="fa fa-commenting "></span> 聯(lián)系客服</button>
</div>
</div>
</div>
<div class="clear"></div>
<div class="for-end" style="height: auto;">
<div class="end-1" style="margin-right: 15px;"><img src="static/images/footlogo.png" alt="" /></div>
<div class="end-2">
<div class="endli">
<ul>
<li>小米商城<span></span></li>
<li>MIUI<span></span></li>
<li>米家<span></span></li>
<li>米聊<span></span></li>
<li>多看<span></span></li>
<li>游戲<span></span></li>
<li>路由器<span></span></li>
<li>米粉卡<span></span></li>
<li>政企服務(wù)<span></span></li>
<li>小米天貓店<span></span></li>
<li>隱私政策<span></span></li>
<li>問(wèn)題反饋<span></span></li>
<li>Select Region</li>
</ul>
</div>
<div class="endli-p">
<a href="#">?mi.com</a>
京ICP證110507號(hào)
<a href="#">京ICP備10046444號(hào)</a>
<a href="#">京公網(wǎng)安備11010802020134號(hào)</a>
<a href="#">京網(wǎng)文[2014]0059-0009號(hào)</a>
</a>
<br> 違法和不良信息舉報(bào)電話：185-0130-1238，本網(wǎng)站所列數(shù)據(jù)，除特殊說(shuō)明，所有數(shù)據(jù)均出自我司實(shí)驗(yàn)室測(cè)試
</div>
</div>
<div class="end-3">
<img src="static/images/footericon1.png" alt="" class="icon" style="margin-right: 10px;" />
<img src="static/images/footericon2.png" alt="" class="icon" style="margin-right: 10px;" />
<img src="static/images/footericon3.png" alt="" class="icon" style="margin-right: 10px;" />
<img src="static/images/footericon4.png" alt="" class="icon" style="margin-right: 10px;" />
<img src="static/images/footericon5.png" alt="" class="icon" />
</div>
<!--<div class="font">探索黑科技，小米為發(fā)燒而生！ </div>-->
</div>
</body>
<script>
$(document).ready(function(){
aliyun()
$('.fa-check').mouseover(function(){
if($(this).attr('class')!='fa fa-check rls'){
$(this).css('color','#FF5722');
}
})
$('.fa-check').mouseleave(function(){
$(this).css('color','#FFF');
})
//普通選擇
$('.fa-check').click(function(){
var cla=$(this).attr('class');
if(cla!='fa fa-check rls'){
$(this).attr('class','fa fa-check rls');
}else{
$(this).attr('class','fa fa-check');
}
minghui()
aliyun()
})
//全選
$('#check-all').click(function(){
var cla=$(this).attr('class');
if(cla!='fa fa-check rls'){
$('.fa-check').attr('class','fa fa-check rls');
}else{
$('.fa-check').attr('class','fa fa-check');
}
aliyun()
})
//檢查是否全選
function minghui(){
//.mi-list-item 中的 i 下面的 class
var msuo=$('.mi-list-item i[class*="fa-check"]').length;
var asuo=$('.mi-list-item i[class$="rls"]').length
if(msuo!=asuo){
$('#check-all').attr('class','fa fa-check')
}else{
$('#check-all').attr('class','fa fa-check rls')
}
}
//加減按鈕 查找每個(gè) p 元素的所有類名為 "selected" 的所有同胞元素：
//siblings('input').val() 用于匹配input框里的val屬性
$('.btn2').click(function(){
var btnval=$(this).siblings('input').val();
//把input框里的文本類型轉(zhuǎn)換成整數(shù) parseInt parseInt() 函數(shù)可解析一個(gè)字符串，并返回一個(gè)整數(shù)。
btnval=parseInt(btnval);
//清零
var curbtnval=0;//可省略 在減中不可
// 初始值等于 btnval+1 每點(diǎn)擊一次加一次
curbtnval=btnval+1
$(this).siblings('input').val(curbtnval);
//商品的數(shù)量 和商品的單價(jià)獲取
var danjia=parseFloat($(this).parents('.mi-good-num').siblings('.mi-good-price').html())//parseFloat class下字符解析成數(shù)字 parents() 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素
var xiaoji=danjia*curbtnval//單價(jià)乘數(shù)量
//頁(yè)面輸出
$(this).parents('.mi-good-num').siblings('.mi-good-total-price').html(xiaoji+'元')
aliyun()
})
//減
$('.btn1').click(function(){
var btnval=$(this).siblings('input').val();
//把input框里的文本類型轉(zhuǎn)換成整數(shù) parseInt parseInt() 函數(shù)可解析一個(gè)字符串，并返回一個(gè)整數(shù)。
btnval=parseInt(btnval);
//清零
var curbtnval=0;//可省略 在減中不可
//當(dāng)btnval<=1的時(shí)候 curbtnval=1 否則 curbtnval=-1
btnval<=1?curbtnval=1:curbtnval=btnval-1
$(this).siblings('input').val(curbtnval);
var danjia=parseFloat($(this).parents('.mi-good-num').siblings('.mi-good-price').html())
var xiaoji=danjia*curbtnval
$(this).parents('.mi-good-num').siblings('.mi-good-total-price').html(xiaoji+'元')
aliyun()
})
//統(tǒng)計(jì)購(gòu)物車(chē)
function aliyun(){
//
var item=$('.mi-list-item i[class*="fa-check"]')
var items=$('.mi-list-item i[class$="rls"]').parents('.mi-select').siblings('.mi-good-total-price')
var itprice=0
for (var i=0;i<items.length;i++) {
itprice+=parseFloat(items[i].innerHTML)
}
//修改總價(jià)
$('.gogo-rmb').html(itprice)
//修改選中數(shù)
$('.gogo-jian').html(items.length)
//修改條數(shù)
$('.gogo-all').html(item.length)
}
})
</script>
</html>
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-01-30 15:19:57
Zusammenfassung des Lehrers：代碼放在代碼塊中提交, 就這么困難嗎? css, 一個(gè)樣式寫(xiě)一行, 難道不行嗎? 你考慮過(guò)別人看你代碼的感受嗎?