複數(shù)の製品を表示するための JavaScript 開発ショッピング カートのチュートリアル
複數(shù)の商品を表示する
上記で紹介した例は、class="shop2" div全體をコピーすると、+または-のどちらをクリックしても問題が発生します。これは、トリガー イベントがすべて最初のプロダクトを?qū)澫螭趣筏皮?、普遍的ではないためです。したがって、この例を変換する必要があります
まず、関數(shù)內(nèi)の関數(shù)を使用します。すべての変數(shù)は次のように渡されます。 parameters
//+ボタンを押す
function add(text,price,subtotal){
//現(xiàn)在のページ番號を取得
var num =document.getElementById( text).value;
//數(shù)量に 1 を追加し、數(shù)量を表示する <inpue> の value 屬性に割り當てます
++num;
document.getElementById ( text).value=num;
//現(xiàn)在のページの數(shù)量を取得し、その數(shù)量を掛けて、小計が屬するdivのページ表示コンテンツに割り當てます
varprice= document.getElementById(price). innerHTML;
var subtotal=price*num;
document.getElementById(subtotal).innerHTML=price*num;
}
// - ボタン
functionminus(text,price,subtotal){
var num=document.getElementById(text).value;
//數(shù)量が負の數(shù)かどうかを判斷します
if(--num<1){
document.getElementById(text).value=0;
}else{
document.getElementById(text).value=num
}
//現(xiàn)在のページのコンテンツを取得します。數(shù)量を掛けた數(shù)量が、小計が屬する div のページ表示コンテンツに割り當てられます
//num の再割り當ては、次の狀況を配置することですnum=-1 が発生します
var num=document.getElementById(text). value;
varprice=document.getElementById(price).innerHTML;
document.getElementById(subtotal).innerHTML= Price*num;
}
他の 2 つの関數(shù)も同様です:
//ユーザーが <input> ボックス內(nèi)の數(shù)値を変更すると、change() 関數(shù)がトリガーされます。カーソルがフォーカスを外した後
function change(text,price,subtotal){
/ /ユーザー入力が非數(shù)値かどうかを判斷し、そうであればユーザーに通知します
if( isNaN(document.getElementById(text).value)){
alert("數(shù)字を入力してください");
document.getElementById(text).value=1;
}
// id="text" で入力ボックスの値を取得します
var num=document.getElementById(text).value;
// 商品の価格を取得します
varprice=document .getElementById(price).innerHTML;
//小計を出力します
document.getElementById(subtotal).innerHTML=price *num;
}
function delect(shop2){
// id="shop" の div を削除します
document.body.removeChild(document.getElementById(shop2));
}
次に、イベントがトリガーされたときに、2 つの製品に関係するすべての 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){
//取出當前頁面的數(shù)量
var num=document.getElementById(text).value;
//將數(shù)量加一然后再賦值給顯示數(shù)量的<inpue>中的value屬性
++num;
document.getElementById(text).value=num;
//取出當前頁面的數(shù)量，與數(shù)量相乘，賦值給小計所屬的div的頁面顯示內(nèi)容
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;
//判斷數(shù)量是不是負數(shù)
if(--num<1){
document.getElementById(text).value=0;
}else{
document.getElementById(text).value=num
}
//取出當前頁面的數(shù)量，與數(shù)量相乘，賦值給小計所屬的div的頁面顯示內(nèi)容
//給num重新賦值是放置出現(xiàn)num=-1情況
var num=document.getElementById(text).value;
var price=document.getElementById(price).innerHTML;
document.getElementById(subtotal).innerHTML=price*num;
}
//用戶在<input>框中改變數(shù)字時，光標失焦后觸發(fā)change()函數(shù)
function change(text,price,subtotal){
//判斷用戶輸入的是否為非數(shù)字，是則提醒用戶
if(isNaN(document.getElementById(text).value)){
alert("請輸入數(shù)字");
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">數(shù)量</div>
<div class="subtotal">小計</div>
<div class="delete">操作</div>
</div>
<!--商品內(nèi)容-->
<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>注: 私たちのページにはまだ多くの不完全な點があります。たとえば、更新すると、以前に選択された情報が初期化されなかったときのものになります。ユーザーの選択、全選択機能がない、商品寫真の表示がないなど、次のバージョンで改善する予定です
