JavaScript开发购物车教程之多件商品展示

展示多个商品

上面介绍的例子是展示一个商品，当我们将整个class="shop2"的div再复制一个的时候，就会发现问题了，无论点击哪个+或者-，变化的都是第一个商品，这是因为我们的触发事件都是针对第一个商品做的，没有通用性，所以，我们需要改造下我们的例子

首先将函数里面用到的变量全部以参数的形式传递进去

//按下+按钮

function add(text,price,subtotal){

//取出当前页面的数量

var num=document.getElementById(text).value;

//将数量加一然后再赋值给显示数量的<inpue>中的value属性

++num;

document.getElementById(text).value=num;

//取出当前页面的数量，与数量相乘，赋值给小计所属的div的页面显示内容

var price=document.getElementById(price).innerHTML;

var subtotal=price*num;

document.getElementById(subtotal).innerHTML=price*num;

}

//按下-按钮

function minus(text,price,subtotal){

var num=document.getElementById(text).value;

//判断数量是不是负数

if(--num<1){

document.getElementById(text).value=0;

}else{

document.getElementById(text).value=num

}

//取出当前页面的数量，与数量相乘，赋值给小计所属的div的页面显示内容

//给num重新赋值是放置出现num=-1情况

var num=document.getElementById(text).value;

var price=document.getElementById(price).innerHTML;

document.getElementById(subtotal).innerHTML=price*num;

}

其它两个函数也是同理：

//用户在<input>框中改变数字时，光标失焦后触发change()函数

function change(text,price,subtotal){

//判断用户输入的是否为非数字，是则提醒用户

if(isNaN(document.getElementById(text).value)){

alert("请输入数字");

document.getElementById(text).value=1;

}

//取得id="text"的input框的value值

var num=document.getElementById(text).value;

//取得商品价格

var price=document.getElementById(price).innerHTML;

//将小计输出出去

document.getElementById(subtotal).innerHTML=price*num;

}

function delect(shop2){

//删除id="shop"的这个div

document.body.removeChild(document.getElementById(shop2));

}

之后再将两个商品里面的涉及id的，id全部改为不一样，在触发事件时，传入不同的id值

完整代码如下

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
 <meta name="format-detection" content="telephone=no" /> 
<title>简易购物车</title>
<meta charset="utf-8" />
<style>	
.shop{
	width:400px;
	background-color:#f0f0f0;
	text-align:center;
}
.shop2{
	text-align:center;
	clear:both;
	border:1px solid black;
    height:21px;
}
.goods{
	float:left;
	width:100px;
}	
.price{
	float:left;
	width:50px;
}	
.number{
	float:left;
	width:110px;
}	
.subtotal{
	float:left;
	width:50px;
	margin-top:2px;
}	
.delete{
	float:left;
	width:35px;
	margin-left:5px;
}	
.text{
	width: 22px;
	text-align:center;
}
</style>
<script >
//按下+按钮
function add(text,price,subtotal){
	//取出当前页面的数量
	var num=document.getElementById(text).value;
	//将数量加一然后再赋值给显示数量的<inpue>中的value属性
	++num;
	document.getElementById(text).value=num;
	//取出当前页面的数量，与数量相乘，赋值给小计所属的div的页面显示内容
	var price=document.getElementById(price).innerHTML;
	var subtotal=price*num;
	document.getElementById(subtotal).innerHTML=price*num;
}
//按下-按钮
function minus(text,price,subtotal){
	var num=document.getElementById(text).value;
	//判断数量是不是负数
	if(--num<1){
		document.getElementById(text).value=0;
	}else{
		document.getElementById(text).value=num
		}
	//取出当前页面的数量，与数量相乘，赋值给小计所属的div的页面显示内容
	//给num重新赋值是放置出现num=-1情况
	var num=document.getElementById(text).value;
	var price=document.getElementById(price).innerHTML;
	document.getElementById(subtotal).innerHTML=price*num;
}
//用户在<input>框中改变数字时，光标失焦后触发change()函数	
function change(text,price,subtotal){
	//判断用户输入的是否为非数字，是则提醒用户
	if(isNaN(document.getElementById(text).value)){
		alert("请输入数字");
		document.getElementById(text).value=1;
	}
	//取得id="text"的input框的value值
	var num=document.getElementById(text).value;
	//取得商品价格
	var price=document.getElementById(price).innerHTML;
	//将小计输出出去
	document.getElementById(subtotal).innerHTML=price*num;
}
function delect(shop2){
	//删除id="shop"的这个div
	document.body.removeChild(document.getElementById(shop2));
}
</script>
</head>
<body>
	<!--购物车标题-->
	<div class="shop">
		<div class="title">简易购物车</div>
		<div class="goods">商品</div>
		<div class="price">单价</div>
		<div class="number">数量</div>
		<div class="subtotal">小计</div>
		<div class="delete">操作</div>
	</div>
	<!--商品内容-->
	<div class="shop2" id="shop2">
		<form>
		<div class="goods">小米MIX </div>
		<div class="price" id="price2">5000</div>
		<div class="number">
			<input type="button" value="-" onclick="minus('text2','price2','subtotal2')"/>
			<input type="text" value="1" class="text" id="text2" onblur="change('text2','price2','subtotal2')"/>
			<input type="button" value="+" onclick="add('text2','price2','subtotal2')"/>
		</div>
		<div class="subtotal" id="subtotal2">5000</div>
		<div class="delete" onclick="delect('shop2')"><a href="#">删除</a></div>
		<form>
	</div>
	<div class="shop2" id="shop3">
		<form>
		<div class="goods">iphone 8 </div>
		<div class="price" id="price3">6000</div>
		<div class="number">
			<input type="button" value="-" onclick="minus('text3','price3','subtotal3')"/>
			<input type="text" value="1" class="text" id="text3" onblur="change('text3','price3','subtotal3')"/>
			<input type="button" value="+" onclick="add('text3','price3','subtotal3')"/>
		</div>
		<div class="subtotal" id="subtotal3">5000</div>
		<div class="delete" onclick="delect('shop3')"><a href="#">删除</a></div>
		<form>
	</div>
</body>
</html>

注：我们的页面还有很多不完善的地方，比如刷新一下，之前选择的信息又会变成初始化时候的样子，没有记住用户的选择，没有全选的功能，没有商品图片的展示等，我们将在下一个版本中完善这些

neue Datei

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
 <meta name="format-detection" content="telephone=no" /> 
<title>简易购物车</title>
<meta charset="utf-8" />
<style>	
.shop{
	width:400px;
	background-color:#f0f0f0;
	text-align:center;
}
.shop2{
	text-align:center;
	clear:both;
	border:1px solid black;
 height:21px;
}
.goods{
	float:left;
	width:100px;
}	
.price{
	float:left;
	width:50px;
}	
.number{
	float:left;
	width:110px;
}	
.subtotal{
	float:left;
	width:50px;
	margin-top:2px;
}	
.delete{
	float:left;
	width:35px;
	margin-left:5px;
}	
.text{
	width: 22px;
	text-align:center;
}
</style>
<script >
//按下+按钮
function add(text,price,subtotal){
	//取出当前页面的数量
	var num=document.getElementById(text).value;
	//将数量加一然后再赋值给显示数量的<inpue>中的value属性
	++num;
	document.getElementById(text).value=num;
	//取出当前页面的数量，与数量相乘，赋值给小计所属的div的页面显示内容
	var price=document.getElementById(price).innerHTML;
	var subtotal=price*num;
	document.getElementById(subtotal).innerHTML=price*num;
}
//按下-按钮
function minus(text,price,subtotal){
	var num=document.getElementById(text).value;
	//判断数量是不是负数
	if(--num<1){
		document.getElementById(text).value=0;
	}else{
		document.getElementById(text).value=num
		}
	//取出当前页面的数量，与数量相乘，赋值给小计所属的div的页面显示内容
	//给num重新赋值是放置出现num=-1情况
	var num=document.getElementById(text).value;
	var price=document.getElementById(price).innerHTML;
	document.getElementById(subtotal).innerHTML=price*num;
}
//用户在<input>框中改变数字时，光标失焦后触发change()函数	
function change(text,price,subtotal){
	//判断用户输入的是否为非数字，是则提醒用户
	if(isNaN(document.getElementById(text).value)){
		alert("请输入数字");
		document.getElementById(text).value=1;
	}
	//取得id="text"的input框的value值
	var num=document.getElementById(text).value;
	//取得商品价格
	var price=document.getElementById(price).innerHTML;
	//将小计输出出去
	document.getElementById(subtotal).innerHTML=price*num;
}
function delect(shop2){
	//删除id="shop"的这个div
	document.body.removeChild(document.getElementById(shop2));
}
</script>
</head>
<body>
	<!--购物车标题-->
	<div class="shop">
		<div class="title">简易购物车</div>
		<div class="goods">商品</div>
		<div class="price">单价</div>
		<div class="number">数量</div>
		<div class="subtotal">小计</div>
		<div class="delete">操作</div>
	</div>
	<!--商品内容-->
	<div class="shop2" id="shop2">
		<form>
		<div class="goods">小米MIX </div>
		<div class="price" id="price2">5000</div>
		<div class="number">
			<input type="button" value="-" onclick="minus('text2','price2','subtotal2')"/>
			<input type="text" value="1" class="text" id="text2" onblur="change('text2','price2','subtotal2')"/>
			<input type="button" value="+" onclick="add('text2','price2','subtotal2')"/>
		</div>
		<div class="subtotal" id="subtotal2">5000</div>
		<div class="delete" onclick="delect('shop2')"><a href="#">删除</a></div>
		<form>
	</div>
	<div class="shop2" id="shop3">
		<form>
		<div class="goods">iphone 8 </div>
		<div class="price" id="price3">6000</div>
		<div class="number">
			<input type="button" value="-" onclick="minus('text3','price3','subtotal3')"/>
			<input type="text" value="1" class="text" id="text3" onblur="change('text3','price3','subtotal3')"/>
			<input type="button" value="+" onclick="add('text3','price3','subtotal3')"/>
		</div>
		<div class="subtotal" id="subtotal3">5000</div>
		<div class="delete" onclick="delect('shop3')"><a href="#">删除</a></div>
		<form>
	</div>
</body>
</html>

einreichen Code zurücksetzen

Automatische Operation

Ganzer Bildschirm