Tutorial troli beli-belah pembangunan JavaScript untuk paparan berbilang produk
Paparkan berbilang produk
Contoh yang diperkenalkan di atas adalah untuk memaparkan satu produk Apabila kami menyalin keseluruhan class="shop2" div , anda akan menemui masalah. Tidak kira mana + atau - yang diklik, produk pertama berubah Ini kerana peristiwa pencetus kami semua disasarkan pada produk pertama dan tidak mempunyai kesejagatan
Lepaskan dahulu semua pembolehubah yang digunakan dalam fungsi sebagai parameter
//Tekan + Butangfungsi add(text,price,subtotal){
//Dapatkan nombor halaman semasa
var num=document.getElementById(text ).value;
//Tambahkan satu pada kuantiti dan kemudian tetapkan pada atribut nilai dalam <inpue> yang memaparkan kuantiti
++num;
document.getElementById(text).value=num;
//Dapatkan nombor semasa halaman, darabkannya dengan nombor dan tetapkan pada kandungan paparan halaman div yang mempunyai subjumlah
var price=document.getElementById(price).innerHTML;
var subtotal=price*num;
document.getElementById(subtotal).innerHTML=price*num;
}
//Tekan - butang
fungsi tolak(teks,harga,subjumlah){
var num=document.getElementById(text).value;
//Tentukan sama ada kuantiti ialah nombor negatif
if(--num<1){
document.getElementById(text).value=0;
}else{
document.getElementById(text).value=num
}
//Dapatkan kandungan halaman semasa Kuantiti, didarab dengan kuantiti, diperuntukkan kepada kandungan paparan halaman div yang kepunyaan subtotalnya
//Menetapkan semula num adalah untuk meletakkan situasi di mana num= -1 berlaku
var num=document.getElementById(text).value;
var price=document.getElementById(price).innerHTML ;
document.getElementById(subtotal).innerHTML=price*num;
}
Begitu juga dengan dua fungsi yang lain Begitu juga:
//Apabila pengguna menukar nombor dalam kotak <input> dicetuskan selepas kursor hilang fokusperubahan fungsi(teks,harga,subjumlah){
// Tentukan sama ada input pengguna bukan -numeric, jika ya, ingatkan pengguna
if(isNaN(document.getElementById(text).value)){
alert( "Sila masukkan nombor");
document.getElementById(text).value=1;
}
//Dapatkan nilai kotak input dengan id="text"
var num=document.getElementById(text).value;
//Dapatkan harga produk
var price=document.getElementById(price).innerHTML;
/ /Keluarkan subjumlah
document.getElementById( subtotal).innerHTML=price*num;
}
function delect(shop2){
//Padam div dengan id="shop"
document.body.removeChild(document.getElementById(shop2)); } kemudian Tukar semua ID yang terlibat dalam kedua-dua produk menjadi berbeza Apabila acara dicetuskan, masukkan nilai ID yang berbeza Kod lengkap adalah seperti berikut Nota: Masih terdapat banyak ketidaksempurnaan dalam halaman kami Sebagai contoh, jika anda menyegarkannya, maklumat yang dipilih sebelum ini akan berubah kepada apa yang ia adalah semasa permulaan Tiada memori pilihan pengguna, tiada fungsi untuk memilih semua. dan tiada gambar produk, dsb., kami akan menambah baik ini dalam versi seterusnya <!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){
//取出當(dāng)前頁面的數(shù)量
var num=document.getElementById(text).value;
//將數(shù)量加一然后再賦值給顯示數(shù)量的<inpue>中的value屬性
++num;
document.getElementById(text).value=num;
//取出當(dāng)前頁面的數(shù)量，與數(shù)量相乘，賦值給小計(jì)所屬的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ù)量是不是負(fù)數(shù)
if(--num<1){
document.getElementById(text).value=0;
}else{
document.getElementById(text).value=num
}
//取出當(dāng)前頁面的數(shù)量，與數(shù)量相乘，賦值給小計(jì)所屬的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ù)字時(shí)，光標(biāo)失焦后觸發(fā)change()函數(shù)
function change(text,price,subtotal){
//判斷用戶輸入的是否為非數(shù)字，是則提醒用戶
if(isNaN(document.getElementById(text).value)){
alert("請(qǐng)輸入數(shù)字");
document.getElementById(text).value=1;
}
//取得id="text"的input框的value值
var num=document.getElementById(text).value;
//取得商品價(jià)格
var price=document.getElementById(price).innerHTML;
//將小計(jì)輸出出去
document.getElementById(subtotal).innerHTML=price*num;
}
function delect(shop2){
//刪除id="shop"的這個(gè)div
document.body.removeChild(document.getElementById(shop2));
}
</script>
</head>
<body>
<!--購物車標(biāo)題-->
<div class="shop">
<div class="title">簡易購物車</div>
<div class="goods">商品</div>
<div class="price">單價(jià)</div>
<div class="number">數(shù)量</div>
<div class="subtotal">小計(jì)</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>
