communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

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
||
<!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>
soumettreRéinitialiser le code
Section précédente Aucun
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492837 joue