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(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> 註：我們的頁面還有很多不完善的地方，例如刷新一下，之前選擇的資訊又會變成初始化時候的樣子，沒有記住用戶的選擇，沒有全選的功能，沒有商品圖片的展示等，我們將在下一個版本中完善這些
