猿问

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

js代码购物车应付款金额计算问题，望请给个参考性代码或提示 谢谢！附HTML和css部分

window.onload=function(){
//header头部，input搜索输入框
var seek=document.querySelector('.seek');
var seekTxt=seek.querySelector('.seek-txt');

 var shop=document.querySelector('.shop');
	 checkAll=shop.querySelector('.checkAll'),
	 check=shop.querySelectorAll('.check'),
     shopItem=shop.querySelectorAll('.shop-item'),
     shopAccounts=shop.querySelector('.shop-accounts-money'),
     index=0;
   console.log(shopAccounts);
		//商品项全选或反选
		for(var i=0;i<check.length;i++){
			check[i].checked=true;
			checkAll.checked=true;
			Allchecked(check[i]);
			index=check.length;
			check[i].onclick=function(){
				if(this.checked==true){
					index++;
					console.log(index);
					if(check.length==index){checkAll.checked=true}
				}else if(this.checked==false){
					index--;
					if(index<=0){index=0}
					console.log(index);
					checkAll.checked=false;
				}
			}
		}
		function Allchecked(all){
	     	checkAll.onclick=function(){
	     		if(checkAll.checked==true){
	     			for(var i=0;i<check.length;i++){check[i].checked=true;}
	     			}else if(checkAll.checked==false){
	     				for(var i=0;i<check.length;i++){check[i].checked=false}
	     			}
	     	}
		}
     //商品金额计算
   	 for(var j=0;j<shopItem.length;j++){
   	 	countMoney(shopItem[j]);
   	 }
   	 function countMoney(data){
   	 	var countPrice=data.querySelector('.countPrice'),//总价
   	 	    unitPrice=data.querySelector('.unitPrice-money'),//单价
	 	    subtract=data.querySelector('.subtract'),//累减
			amount=data.querySelector('.amount'),//text文本框
		 	add=data.querySelector('.add');//累加
		var numInput=Number(amount.value),
			price=parseInt(unitPrice.innerHTML);
		subtract.onclick=function(){
			if(numInput>1){
				numInput--;
				amount.value=numInput;
				countPrice.innerHTML=price*numInput;
			}
		}
		add.onclick=function(){
			if(numInput<99){
				numInput++;
				amount.value=numInput;
				countPrice.innerHTML=price*numInput;
				}
		}
		//利用onchange事件确定用户在amount手动输入值的变化
		amount.onchange=function(){
			if(isNaN(this.value)){
				alert('请用数字表示商品数量! 如：1 2 3...');
				this.value=1;
			}else if(this.value<=0||this.value>=99){
				alert('商品数量不能为 0 或大于库存量，请重新输入！');
				this.value=1;
				countPrice.innerHTML=price*this.value;
			}else{
				countPrice.innerHTML=this.value*price;
			}
		}
   	 }
   
	 //商品应付金额计算   这里怎么写，老是计算点击那个商品项金额？
//	 function paymentMoney(){
//	 	var unitPrice=shop.querySelector('.unitPrice-money');
//	 	var amount=shop.querySelector('.amount');
//	 	var numInput=Number(amount.value);
//	 	var price=parseInt(unitPrice.innerHTML);
//	 	for(var k=0;k<shopItem.length;k++){
//	 		shopAccounts.innerHTML=price*numInput;
//	 		}
//		}
//	 	paymentMoney();
	}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/index.css" rel="stylesheet" type="text/css" />
		<script src="js/script.js"></script>
	</head>
	<body>
		<!--导航-->
		<header class="header">
			<div class="header-item-left">
					<a href="javscript:;"><img src="img/logo.png" /></a>
					<ul>
						<a href="javascript:;"><li>课程</li></a>
						<a href="javascript:;"><li>职业路径</li></a>
						<a href="javascript:;"><li>实战</li></a>
						<a href="javascript:;"><li>猿问</li></a>
						<a href="javascript:;"><li>手记</li></a>
					</ul>
			</div>
			<div class="header-item-right">
				<a class="header-item-right_icon_3" href="javascript:;"></a>
				<a class="header-item-right_icon_2" href="javascript:;"></a>
				<a class="header-item-right_icon_1" href="javascript:;"></a>
				<div class="seek">
					<input type="text" class="seek-txt" placeholder=""/>
					<a href="javascript:;" class="seek-icon"></a>
				</div>
			</div>
		</header>
		<!--背景修饰图片-->
		<section class="banner"></section>
		
		<!--购物结算窗口-->
		<aside class="shop">
			<h1>我的购物车</h1>
			
			<div class="shop-content">
				<!--购物商品窗口导航-->
				<div class="shop-nav">
					<input type="checkbox" class="checkAll"  id="box"/>
					<label class="shop-nav-item_1" for="box">全选</label>
					<span class="shop-nav-item_2">商品名称</span>
					<span class="shop-nav-item_3">总价</span>
					<span class="shop-nav-item_4">单价</span>
					<span class="shop-nav-item_5">数量</span>
					<span class="shop-nav-item_6">操作</span>
				</div>
			<div class="shop-item">
				<input type="checkbox" class="check" />
				<span>
					<a href="javascript:;" class="shop-item-img_1"></a>
					<a href="javascript:;" class="shop-item_title">前端小白成长记</a>
				</span>
				<div class="shop-item-price">
					<span class="count">￥ <b class="countPrice">396</b></span>
					<span class="unitPrice">￥<b class="unitPrice-money">396</b></span>
					<input type="button" value="-"  class="subtract"/>
					<input type="text"   value="1"	class="amount" />
					<input type="button" value="+"  class="add" />
				</div>
					<span class="shop-item-delete">删除</span>
			</div>
			<div class="shop-item">
				<input type="checkbox" class="check" />
				<span>
					<a href="javascript:;" class="shop-item-img_2"></a>
					<a href="javascript:;" class="shop-item_title">前端小白成长记</a>
				</span>
				<div class="shop-item-price">
					<span class="count">￥<b class="countPrice">396</b> </span>
					<span class="unitPrice">￥ <b class="unitPrice-money">396</b></span>
					<input type="button" value="-"  class="subtract"/>
					<input type="text"   value="1"	class="amount" />
					<input type="button" value="+"  class="add" />
				</div>
				<span class="shop-item-delete">删除</span>
			</div>
			<div class="shop-item">
				<input type="checkbox" class="check" />
				<span>
					<a href="javascript:;" class="shop-item-img_3"></a>
					<a href="javascript:;" class="shop-item_title">前端小白成长记</a>
				</span>
				<div class="shop-item-price">
					<span class="count">￥ <b class="countPrice">396</b></span>
					<span class="unitPrice">￥ <b class="unitPrice-money">396</b></span>
					<input type="button" value="-"  class="subtract"/>
					<input type="text"   value="1"	class="amount" />
					<input type="button" value="+"  class="add" />
				</div>
				<span class="shop-item-delete">删除</span>
			</div>
			<div class="shop-item">
				<input type="checkbox" class="check" />
				<span>
					<a href="javascript:;" class="shop-item-img_4"></a>
					<a href="javascript:;" class="shop-item_title">前端小白成长记</a>
				</span>
				<div class="shop-item-price">
					<span class="count">￥ <b class="countPrice">396</b></span>
					<span class="unitPrice">￥ <b class="unitPrice-money">396</b></span>
					<input type="button" value="-"  class="subtract"/>
					<input type="text"   value="1"	class="amount" />
					<input type="button" value="+"  class="add" />
				</div>
				<span class="shop-item-delete">删除</span>
			</div>
			</div><!--shop-content结束-->
			
			<!--结算商品金额-->
			<div class="shop-accounts">
				<span>应付金额：<b>￥</b><b class="shop-accounts-money">1584</b></span>
				<a href="javascript:;">去结算</a>
			</div>
		</aside>
			
		<!--页脚-->
		<footer>
			<!--页脚导航-->
			<div class="footer-content">
				<ul>
					<a href="javascript:;"><li>网站首页</li></a>
					<a href="javascript:;"><li>企业合作</li></a>
					<a href="javascript:;"><li>人才招聘</li></a>
					<a href="javascript:;"><li>联系我们</li></a>
					<a href="javascript:;"><li>讲师招慕</li></a>
					<a href="javascript:;"><li>常见问题</li></a>
					<a href="javascript:;"><li>意见反馈</li></a>
					<a href="javascript:;"><li>慕课大学</li></a>
					<a href="javascript:;"><li>友情链接</li></a>
				</ul>
				<!--关注图标-->
				<div class="footer-icon">
					<span class="footer-icon-weixin_QRcode hide"></span>
					<span class="footer-icon-weixin"></span>
					<span class="footer-icon-xinlang"></span>
					<span class="footer-icon-qq"></span>
				</div>
			</div>
			<div class="footer-title">Copyrigth @ 2017 imooc.com ALL Rigthis Reserved |京ICP备 13016642号-2</div>
		</footer>
	</body>
</html>


会飞的铁蛋
浏览 2058回答 1
1回答

橋本奈奈未

好~~~~~~~长。略过。简单一点的思路就是：声明一个变量来记录总价，给input绑定change事件，在事件回调中加减总价。给按钮绑定点击事件，在事件回调中判断当前点击项是否被选中，是则加减总价。全选按钮也是绑定change事件，遍历列表项做对应的操作。
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript