如何解决取消商品勾选时，应付金额减少？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车功能实现</title> <link rel="stylesheet" type="text/css" href="new_file.css"/> </head> <body> <header> <div class="left"> <img src="img/logo.png" alt="" /> </div> <div class="nav"> <ul> <li><a href="">课程</a></li> <li class="active"><a href="" >职业路径<span><img src="img/icon-new.png"/></span></a></li> <li><a href="">实战</a></li> <li><a href="">猿问</a></li> <li><a href="">手记</a></li> </ul> </div> <div class="right"> <div class="xiaotubiao"> <a href="" class="item item-bao"></a> <a href="" class="item item-linsheng"></a> <a href="" class="item item-touxiang"></a> </div> <div class="search"> <input type="" name="" id="" value="" /> <a href="seaech-btn"></a> </div> </div> </header> <div class="banner"></div> <!--商品结算区域--> <div class="settlement"> <div class="title"> <p>我的购物车</p> </div> <!--有阴影的盒子--> <div class="boxshadow"> <div class="top"> <input type="checkbox" name="" id="all" checked="checked"/><label for="">全选</label> <span>商品名称</span> <span>总价</span> <span>单价</span> <span>数量</span> <span>操作</span> </div> <div class="container"> <!--每条商品信息的容器--> <div class="Commodity-information"> <input type="checkbox" class="checkbox" name="" id="itemchek" checked="checked" value=""/> <div class="images"> <img src="img/g1.jpg"/> </div> <span>前端小白成长记</span> <span >￥<e id="total">396</e></span> <span >￥<e id="unitPrice">396</e></span> <span> <a href="#" id="subtract">-</a> <input type="text" name="" class="one" id="number" value="1" /> <a href="#" id="add">+</a> </span> <span><a href="#" id="delect">删除</a></span> </div> <div class="Commodity-information"> <input type="checkbox" name="" class="checkbox" id="itemchek" checked="checked" value=""/> <div class="images"> <img src="img/g2.jpg"/> </div> <span>前端小白成长记</span> <span>￥<e id="total">396</e></span> <span >￥<e id="unitPrice">396</e></span> <span> <a href="#" id="subtract">-</a> <input type="text" name="" id="number" value="1" /> <a href="#" id="add" >+</a> </span> <span><a href="#" id="delect">删除</a></span> </div> <div class="Commodity-information"> <input type="checkbox" name="" class="checkbox" id="itemchek" checked="checked" value=""/> <div class="images"> <img src="img/g1.jpg"/> </div> <span>前端小白成长记</span> <span>￥<e id="total">396</e></span> <span>￥<e id="unitPrice">396</e></span> <span> <a href="#" id="subtract">-</a> <input type="text" name="" id="number" value="1" /> <a href="#" id="add">+</a> </span> <span><a href="#" id="delect">删除</a></span> </div> <div class="Commodity-information"> <input type="checkbox" name="" class="checkbox" id="itemchek" checked="checked" value=""/> <div class="images"> <img src="img/g1.jpg"/> </div> <span>前端小白成长记</span> <span>￥<e id="total">396</e></span> <span>￥<e id="unitPrice">396</e></span> <span> <a href="#" id="subtract">-</a> <input type="text" name="" id="number" value="1" /> <a href="#" id="add">+</a> </span> <span><a href="#" id="delect">删除</a></span> </div> </div> </div> <div class="bottom"> <p>应付金额： <span class="red">￥1584</span> <a href="">去结算</a></p> </div> </div> <!--footer区域--> <div class="clear"> </div> <footer> <div class="footer-box"> <div class="footer-link"> <a href="#" class="footer-link__item">网站首页</a> <a href="#" class="footer-link__item">企业合作</a> <a href="#" class="footer-link__item">人才招聘</a> <a href="#" class="footer-link__item">联系我们</a> <a href="#" class="footer-link__item">讲师招募</a> <a href="#" class="footer-link__item">常见问题</a> <a href="#" class="footer-link__item">意见反馈</a> <a href="#" class="footer-link__item">慕课大学</a> <a href="#" class="footer-link__item">友情链接</a> </div> <div class="footer__copy">Copyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2</div> <div class="footer-share"> <a href="#" class="footer-share__item footer-share__item_i_1"></a> <a href="#" class="footer-share__item footer-share__item_i_2"></a> <a href="#" class="footer-share__item footer-share__item_i_3"></a> </div> </div> </footer> <script src="new_file.js" type="text/javascript" charset="utf-8"></script> </body> </html>
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
background-color:#000000;
height: 60px;
}
header .left{
float: left;
margin-top: 10px;
margin-left: 27px;
margin-right: 25px;
}
header .nav {
float: left;
color:#F1F1F1;
font-size: 16px;
}
header .nav ul li{
float: left;
list-style: none;
padding: 19px 25px;
text-align: center;
}
header .nav ul li a{
text-decoration: none;
color: white;
position: relative;
text-align: center;
}
header .nav ul .active{
background:#363c41;
}
header .nav ul li a span{
position: absolute;
top: -7px;
}
header .nav ul li:hover{
background:#363c41;
cursor: pointer;
}
header .right{
float: right;
}
header .right .xiaotubiao{
float: right;
height: 60px;
}
header .right .xiaotubiao a{
display: inline-block;
width: 20px;
height: 20px;
background: url(img/icon-1-sprite_w22.png);
margin:20px 25px;
background-repeat: no-repeat;
}
header .right .xiaotubiao .item-bao{
background: url(img/icon-1-sprite_w22.png) 0px 110px;
}
header .right .xiaotubiao .item-linsheng{
background: url(img/icon-1-sprite_w22.png) 0px 42px;
}
header .right .xiaotubiao .item-touxiang{
background: url(img/ava.jpg) no-repeat;
height: 40px;
width: 40px;
border-radius:50% ;
background-size: 100%;
margin: 10px;
}
header .search{
float: right;
position:relative;
}
header .search:after{
content: "前端入门";
height: 30px;
width: 70px;
text-align: center;
background: #2a353a;
color: #5b666b;
position: absolute;
top: 15px;
line-height: 30px;
}
header .search input{
height: 40px;
width: 268px;
border: none;
border-bottom:1px solid #616667;
background: #000000;
margin-top: 10px;
margin-right: 25px;
}
header .search a{
background: url(img/icon-1-sprite_w22.png);
width: 20px;
height: 20px;
position: absolute;
display: inline-block;
right: 30px;
top: 20px;
}
.banner{
width: 100%;
height: 160px;
background: url(img/cart-header-bg.jpg);
}
/*商品结算区域*/
.settlement{
width:70%;
margin:-125px auto;
/*border: 1px solid red;*/
}
.settlement .title{
font-size: 30px;
}
.settlement .boxshadow{
margin-top:25px ;
box-shadow:0px 0px 15px rgba(96,96,96,0.5);
}
.settlement .boxshadow .top{
height: 60px;
line-height: 60px;
background: #ebebeb;
padding-left:20px ;
position: relative;
color: #616161;
font-weight:600;
}
/*灰色的头条*/
.settlement .boxshadow .top input{
margin-right: 10px;
}
.settlement .boxshadow .top span{
position: absolute;
}
.settlement .boxshadow .top span:nth-of-type(1){
margin-left: 30px;
}
.settlement .boxshadow .top span:nth-of-type(2){
left: 41%;
}
.settlement .boxshadow .top span:nth-of-type(3){
left: 51%;
}
.settlement .boxshadow .top span:nth-of-type(4){
left: 62%;
}
.settlement .boxshadow .top span:nth-of-type(5){
right: 70px;
}
/*商品内容区域*/
.settlement .boxshadow .container .Commodity-information{
height: 120px;
line-height:120px;
padding-left:20px ;
position: relative;
color:#8e9299 ;
border-bottom: 1px solid #8e9299;
}
.settlement .boxshadow .container .Commodity-information input{
margin-right: 10px;
}
.settlement .boxshadow .container .Commodity-information .images{
width: 160px;
height: 120px;
/*display: inline-block;
background: url(img/g1.jpg);*/
position: absolute;
left: 50px;
top: 10px;
}
.settlement .boxshadow .container .Commodity-information span{
position: absolute;
}
.settlement .boxshadow .container .Commodity-information span:nth-of-type(1){
margin-left:20%;
}
.settlement .boxshadow .container .Commodity-information span:nth-of-type(2){
left: 40%;
}
.settlement .boxshadow .container .Commodity-information span:nth-of-type(3){
left: 50%;
}
.settlement .boxshadow .container .Commodity-information span:nth-of-type(4){
left: 60%;
}
.settlement .boxshadow .container .Commodity-information span:nth-of-type(5){
right: 70px;
}
.settlement .boxshadow .container .Commodity-information span:nth-of-type(4) input{
width: 50px;
}
.settlement .boxshadow .container .Commodity-information a{
text-decoration: none;
color: #8e9299;
}
/*总金额结算区域*/
.settlement .bottom{
height: 50px;
border: 1px solid #8e9299;
border-right: none;
margin-top:20px ;
line-height: 50px;
text-align: right;
}
.settlement .bottom a{
text-decoration: none;
display:inline-block;
font-size: 20px;
padding:0 30px;
color: white;
background: red;
height: 50px;
}
.red{
color: red;
font-weight: bold;
}
/*footer区域*/
footer{
height: 96px;
background: #000000;
color: #7c7c7c;
margin-top: 160px;
}
.footer-box{
margin: 0 auto;
width: 70%;
position: relative;
}
footer .footer-box .footer-link{
/*float: left;*/
/*line-height: 96px;*/
position: absolute;
left: 0;
top: 30px;
width: 700px;
}
footer .footer-box .footer-link a{
display: inline-block;
text-decoration: none;
color:#9f9f9f;
font-size: 13px;
margin-right:1.5%;
}
footer .footer-box .footer-link a:hover{
color: red;
}
footer .footer-box .footer__copy{
float: left;
font-size: 12px;
height: 96px;
line-height: 120px;
}
footer .footer-share{
width: 180px;
height: 36px;
float: right;
margin-top: 30px;
}
footer .footer-share .footer-share__item{
display: inline-block;
width: 36px;
height: 36px;
margin-left: 12px;
background-image: url(img/footer-sprite.png);
background-repeat: no-repeat;
}
footer .footer-share .footer-share__item_i_1{
background-position: 0px -278px;
position: relative;
}
footer .footer-share .footer-share__item_i_1:hover::after{
content: "";
display: block;
width: 160px;
height: 220px;
background: url(img/footer-sprite.png);
position: absolute;
top: -220px;
left: -70px;
}
footer .footer-share .footer-share__item_i_2{
background-position: 0px -320px;
}
footer .footer-share .footer-share__item_i_3{
background-position: 0px -362px;
}(function(){
var box=document.getElementsByClassName("Commodity-information")
var all = document.getElementById("all")
var checkbox=document.querySelectorAll('#itemchek');
var add=document.querySelectorAll('#add')
var subtract=document.querySelectorAll('#subtract')
var numbers=document.querySelectorAll('#number')
var delect=document.querySelectorAll('#delect')
var CommodityInformation=document.querySelectorAll('.Commodity-information')
var total=document.querySelectorAll('#total')
var unitPrice=document.querySelectorAll('#unitPrice')
var jiesuan=document.querySelector('.red')
// var one = document.getElementsByClassName('one')
// var index=0;
// console.log(one)
// console.log(one.value)
// console.log(add)
all.onclick=function(){
//点击全选按钮所有商品都会被勾上
if(this.checked){
for(var i=0 ; i<checkbox.length;i++){
checkbox[i].checked=true
}
}else{
for(var i=0 ; i<checkbox.length;i++){
checkbox[i].checked=false
}
}
}
for(var i=0;i<add.length;i++){
(function(i){ //把每次i的值保存下来
index=i
var j=0
add[i].onclick=function(e){
//阻止默认事件
e.preventDefault()
numbers[i].value++
//每点击所对应商品的总价
shopmoney(i,unitPrice,numbers)
//所有商品加起来的价格
money(i,total)
}
//减号事件，计算当前商品的总金额，并且计算所有商品的总金额
subtract[i].onclick=function(e){
e.preventDefault()
numbers[i].value--
// if(numbers[i].checked==false){
// numbers[i].value=0
// }
if(numbers[i].value<1){
numbers[i].value=1
return;
}
//每点击所对应商品的总价
shopmoney(i,unitPrice,numbers)
//判断当商品数量小于1的时候等于1
//所有商品加起来的价格
money(i,total)
}
//删除
delect[i].onclick=function(e){
e.preventDefault()
CommodityInformation[i].style.display="none";
}
//当所有商品选中时全选按钮才会勾起来
checkbox[i].onclick=function(){
if(checkbox[0].checked&&checkbox[1].checked&&checkbox[2].checked&&checkbox[3].checked){
all.checked=true
}else{
all.checked=false
}
}
})(i)
}
//每点击所对应商品的总价
function shopmoney(index,unitPrice,numbers){
total[index].innerHTML=parseInt(parseInt(unitPrice[index].innerHTML)*parseInt(numbers[index].value))
}
//所有商品加起来的价格
function money(index,total){
var sum=0
for(var index=0;index<CommodityInformation.length;index++){
sum=+sum+ +total[index].innerHTML
}
jiesuan.innerHTML="￥"+sum
}
})()0
收起
正在回答
1回答
你好，测试了同学的代码，建议在计算应付金额和总价的函数中不传入参数，这样不好控制，老师把其他代码都注释掉了，单独写的商品按钮的点击事件，可以参考一下：
其他逻辑事件可以参考这个来写，自己试试吧。
祝学习愉快！
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星