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 + Butang

fungsi 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 fokus

perubahan 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

<!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>

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

Meneruskan pembelajaran

||

fail baharu

<!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>

serahkan Tetapkan Semula Kod
Operasi automatik

Tutorial troli beli-belah pembangunan JavaScript untuk paparan berbilang produk

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]