Tutoriel de panier d'achat de développement JavaScript pour l'affichage de plusieurs produits

Afficher plusieurs produits

L'exemple présenté ci-dessus consiste à afficher un produit Lorsque nous copions l'intégralité de la div class="shop2", vous trouverez le. Problème. Peu importe sur quel + ou - vous cliquez, le premier produit change. En effet, nos événements déclencheurs sont tous ciblés sur le premier produit et n'ont donc aucune universalité. Nous devons donc le modifier.

Passez d'abord toutes les variables utilisées dans la fonction comme paramètres

//Appuyez sur le bouton +

fonction add(text,price,subtotal){

//Obtenir le numéro de la page actuelle

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

//Ajoutez-en un à la quantité, puis attribuez-le à l'attribut value dans le <inpue> qui affiche la quantité

++num;

document.getElementById(text).value=num;

//Obtenir le numéro de l'actuel page, multipliez-le par le nombre et attribuez-le au contenu d'affichage de la page du div auquel appartient le sous-total

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

var subtotal=price*num;

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

}

//Appuyez sur - bouton

fonction moins (texte, prix, sous-total){

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

//Déterminer si la quantité est un nombre négatif

if(--num<1){

document.getElementById(text).value=0;

}else{

document.getElementById(text).value=num

}

//Obtenir le contenu de la page actuelle Quantité, multipliée par la quantité, affectée à la page afficher le contenu du div auquel appartient le sous-total

//Réaffecter num consiste à placer la situation où num= -1 se produit

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

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

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

}

Il en va de même pour les deux autres fonctions De même :

//Lorsque l'utilisateur modifie le numéro dans la zone <input> est déclenché après que le curseur perd le focus

function change(text,price,subtotal){

// Détermine si l'entrée de l'utilisateur n'est pas -numeric, si c'est le cas, rappeler à l'utilisateur

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

alert( "Veuillez entrer un numéro");

document.getElementById(text).value=1;

}

//Obtenir la valeur de la zone de saisie avec id="text"

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

//Obtenir le prix du produit

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

/ /Sortez le sous-total

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

}

function delect(shop2){

//Supprimer le div avec id="shop"

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

}

plus tard Modification tous les identifiants des deux produits doivent être différents. Lorsque l'événement est déclenché, transmettez différentes valeurs d'identifiant

Le code complet est le suivant

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

Remarque : Notre page présente encore de nombreuses imperfections. Par exemple, si vous la rafraîchissez, les informations précédemment sélectionnées redeviendront ce qu'elles étaient lors de l'initialisation. Il n'y a pas de mémoire du choix de l'utilisateur, pas de fonction pour tout sélectionner, et pas de produit. images. Affichage, etc., nous les améliorerons dans la prochaine version

Formation continue

||

nouveau fichier

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

soumettre Réinitialiser le code
Opération automatique

Tutoriel de panier d'achat de développement JavaScript pour l'affichage de plusieurs produits

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]