interface Web
js tutoriel
JQuery implémente des fonctions d'ajout, de suppression et de règlement de panier
JQuery implémente des fonctions d'ajout, de suppression et de règlement de panier
Cet article présente principalement des exemples de fonctions d'ajout, de suppression et de règlement de panier basées sur JQuery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.
J'ai appris il y a quelque temps que le règlement du panier est une partie difficile, et j'en ai aussi trouvé sur Internet. Cependant, outre les plug-ins, il existe des produits semi-finis sur Internet. . Par exemple, certains d'entre eux n'ont que des effets d'ajout et de suppression, et d'autres n'ont qu'une fonction de règlement, il est rare de voir l'effet de panier intégré ensemble, j'en ai donc écrit un moi-même pour que tout le monde puisse le voir
(L'ajouté. l'effet n'a pas volé, je suis trop paresseux pour écrire l'effet d'animation, alors regardez-le)
Partie HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/index.css" rel="external nofollow" >
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<p id="banner"></p>
<p id="container">
<ul>
<li num="1"><img src="images/1.jpg"/><span class="things_name">2014年春季爆品A<p>$<i>10</i><span class="buy">点击购买</p></li>
<li num="2"><img src="images/2.jpg"/><span class="things_name">2014年春季爆品B<p>$<i>20</i><span class="buy">点击购买</p></li>
<li num="3"><img src="images/3.jpg"/><span class="things_name">2014年春季爆品C<p>$<i>30</i><span class="buy">点击购买</p></li>
<li num="4"><img src="images/4.jpg"/><span class="things_name">2014年春季爆品D<p>$<i>40</i><span class="buy">点击购买</p></li>
</ul>
</p>
<p id="carlist">
<p class="car">
<p>
<span class="carLogo"><span><img src="images/car.png"/>
<span class="txt">购<br />物<br />车
</p>
</p>
<p class="list">
<!--此处添加动态元素-->
<p class="total">
<span>总价：<span>0元
</p>
</p>
</p>
<script type="text/javascript">
function view(){
return{
w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight
};
}
document.body.style.height=view().h+"px";
</script>
</body>
</html>Partie JS
$(function(){
var mark=0;
$(".car").on("click",function(){
if(mark==0){
$("#carlist").animate({marginRight:"0px"},500)
mark=1;
}else{
$("#carlist").animate({marginRight:"-260px"},500)
mark=0
}
})
//点击购买按钮添加至购物车
var buyButton=$(".buy");
buyButton.on("click",BuyClick)
function BuyClick(){
var thingsName=$(this).parents("li").find(".things_name").text();
var thingsPrice=$(this).parent().find("i").text();
var thingsImage=$(this).parents("li").find("img").attr("src");
var kNum=$(this).parents("li").attr("num")
var Geshu=1;
$(this).off("click").text("已经添加至购物车");
$(".list").append('<p class="select things" num='+kNum+'><img src='+thingsImage+'/><p class="name">'+thingsName+'</p><p class="price">$<i>'+thingsPrice+'</i></p><ul class="caozuo"><li class="zengjian"><span class="minus">-<span>1<span class="add">+</li><li class="del">删除</li></ul></p>');
countTotalPrice();
totalGeshu();
//点击加号添加商品个数
$(".add").off("click").on("click",function(){
Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text())
Geshu++
$(this).parent().find("span:nth-of-type(2)").text(Geshu)
countTotalPrice();
totalGeshu();
})
//动态生成的元素点击减号减少商品个数
$(".minus").off("click").on("click",function(){
Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text());
if(Geshu>1){
Geshu--;
$(this).parent().find("span:nth-of-type(2)").text(Geshu)
}else{
Geshu==1;
}
countTotalPrice();
totalGeshu();
})
//删除购物车内的商品
var del=$(".del");
del.each(function(){
$(this).off("click").on("click",function(){
var delName=$(this).parents(".things").find(".name").text();
$(this).parents(".things").remove();
countTotalPrice();
totalGeshu();
var oldBtn=$("#container ul li").find("span:contains("+delName+")").parents("li").find(".buy")
oldBtn.on("click",BuyClick).text("点击购买")
})
})
//计算总价函数
function countTotalPrice(){
var totalPrice=0,listThings=$(".list").find(".things");
for (var i=0;i<listThings.length;i++) {
var this_geshu=parseInt(listThings.eq(i).find(".zengjian span:nth-of-type(2)").text());
var this_price=parseInt(listThings.eq(i).find(".price i").text());
totalPrice+=this_geshu*this_price;
}
$(".total span").eq(1).text(totalPrice);
totalGeshu();
}
//购物车上的商品总数
function totalGeshu(){
var listThings=$(".list").find(".things");
if (listThings.length>0) {
var totalGeshu=0;
listThings.each(function(){
var this_geshu=parseInt($(this).find(".zengjian span:nth-of-type(2)").text());
totalGeshu+=this_geshu;
})
$(".carLogo span").html(totalGeshu)
} else{
$(".carLogo span").css("display","none")
}
}
}
})Recommandations associées :
Simulation JQuery Partage d'exemples d'effet d'animation de panier d'achat Tmall
Utilisation de JavaScript pour partager des exemples simples de panier d'achat
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Le dossier inetpub peut-il être supprimé ? Comment supprimer rapidement le dossier inetpub sur le lecteur C
Mar 13, 2024 pm 02:00 PM
Il a été constaté qu'il existe un dossier inetpub sur le lecteur C de l'ordinateur qui occupe beaucoup de mémoire. Qu'est-ce que ce dossier inetpub ? Peut-il être supprimé directement ? En fait, inetpub est un dossier sur le serveur IIS. Le nom complet d'IIS est Internet Information Services, qui signifie Internet Information Services. Il peut être utilisé pour créer et déboguer des sites Web. S'il n'est pas nécessaire, il peut être désinstallé. La méthode spécifique est la suivante : 1. Cliquez avec le bouton droit sur le menu Démarrer et sélectionnez « Programmes et fonctionnalités ». 2. Après ouverture, cliquez sur « Activer ou désactiver les fonctionnalités de Windows ». 3. Dans la liste des fonctionnalités Windows, décochez II
Comment supprimer les notes Xiaohongshu
Mar 21, 2024 pm 08:12 PM
Comment supprimer les notes de Xiaohongshu ? Les notes peuvent être modifiées dans l'application Xiaohongshu. La plupart des utilisateurs ne savent pas comment supprimer les notes de Xiaohongshu. Ensuite, l'éditeur propose aux utilisateurs des images et des textes expliquant comment supprimer les notes de Xiaohongshu. un regard ensemble ! Tutoriel d'utilisation de Xiaohongshu Comment supprimer les notes de Xiaohongshu 1. Ouvrez d'abord l'application Xiaohongshu et entrez dans la page principale, sélectionnez [Moi] dans le coin inférieur droit pour accéder à la zone spéciale 2. Ensuite, dans la zone Ma, cliquez sur la page de note comme suit : indiqué ci-dessous, sélectionnez la note que vous souhaitez supprimer ; 3. Accédez à la page de notes, cliquez sur [trois points] dans le coin supérieur droit ; 4. Enfin, la barre de fonctions s'agrandira en bas, cliquez sur [Supprimer] pour terminer.
Quel dossier trouve-t-on.000 ? Le dossier found.000 peut-il être supprimé ?
Mar 13, 2024 pm 08:52 PM
Au cours de l'utilisation quotidienne de l'ordinateur, vous pouvez recevoir un message d'erreur indiquant que le fichier found.000 est perdu et endommagé. De quel dossier s'agit-il ? Peut-il être supprimé s’il n’est plus utile ? Puisque tant de gens ne connaissent pas ce fichier, laissez-moi vous parler en détail du dossier found.000 ~ 1. Qu'est-ce que le dossier found.000 Lorsque l'ordinateur est partiellement ou complètement perdu en raison d'un arrêt illégal, vous pouvez le trouver ? le dossier spécial nommé "found.000" et les fichiers avec l'extension ".chk" qu'il contient dans le répertoire spécifié de la partition système. Ce "pour
Est-il vrai que vous pouvez être bloqué et supprimé sur WeChat et ne pas pouvoir être ajouté de manière permanente ?
Apr 08, 2024 am 11:41 AM
1. Tout d'abord, il est faux de bloquer et de supprimer définitivement quelqu'un et de ne pas l'ajouter de manière permanente. Si vous souhaitez ajouter l'autre partie après l'avoir bloquée et supprimée, vous n'avez besoin que du consentement de l'autre partie. 2. Si un utilisateur bloque quelqu'un, l'autre partie ne pourra pas envoyer de messages à l'utilisateur, voir son cercle d'amis ou passer des appels avec l'utilisateur. 3. Le blocage ne signifie pas la suppression de l'autre partie de la liste de contacts WeChat de l'utilisateur. 4. Si l'utilisateur supprime l'autre partie de sa liste de contacts WeChat après l'avoir bloqué, il n'y a aucun moyen de récupérer après la suppression. 5. Si l'utilisateur souhaite à nouveau ajouter l'autre partie comme ami, l'autre partie doit accepter et ajouter à nouveau l'utilisateur.
Comment supprimer les versions de Xiaohongshu ? Comment récupérer après suppression ?
Mar 21, 2024 pm 05:10 PM
En tant que plate-forme sociale de commerce électronique populaire, Xiaohongshu a attiré un grand nombre d'utilisateurs pour partager leur vie quotidienne et leurs expériences d'achat. Parfois, nous pouvons publier par inadvertance du contenu inapproprié, qui doit être supprimé à temps pour mieux préserver notre image personnelle ou respecter les réglementations de la plateforme. 1. Comment supprimer les versions de Xiaohongshu ? 1. Connectez-vous à votre compte Xiaohongshu et accédez à votre page d'accueil personnelle. 2. Au bas de la page d'accueil personnelle, recherchez l'option « Mes créations » et cliquez pour entrer. 3. Sur la page « Mes créations », vous pouvez voir tout le contenu publié, y compris les notes, vidéos, etc. 4. Recherchez le contenu qui doit être supprimé et cliquez sur le bouton "..." à droite. 5. Dans le menu contextuel, sélectionnez l'option "Supprimer". 6. Après avoir confirmé la suppression, le contenu disparaîtra de votre page d'accueil personnelle et de votre page publique.
Qu'est-ce que le fichier hiberfil.sys ? hiberfil.sys peut-il être supprimé ?
Mar 15, 2024 am 09:49 AM
Récemment, de nombreux internautes ont demandé à l'éditeur : quel est le fichier hiberfil.sys ? hiberfil.sys peut-il occuper beaucoup d’espace sur le disque C et être supprimé ? L'éditeur peut vous indiquer que le fichier hiberfil.sys peut être supprimé. Jetons un coup d'œil aux détails ci-dessous. hiberfil.sys est un fichier caché dans le système Windows et également un fichier d'hibernation du système. Il est généralement stocké dans le répertoire racine du lecteur C et sa taille est équivalente à la taille de la mémoire installée du système. Ce fichier est utilisé lorsque l'ordinateur est en veille prolongée et contient les données de mémoire du système actuel afin qu'il puisse être rapidement restauré à son état précédent lors de la récupération. Étant donné que sa taille est égale à la capacité de la mémoire, il peut occuper une plus grande quantité d’espace sur le disque dur. hiberner
Comment supprimer complètement WeChat File Transfer Assistant_Introduction à la fermeture de WeChat File Transfer Assistant
Mar 20, 2024 pm 08:31 PM
L'assistant de transfert de fichiers de WeChat est disponible pour tous les utilisateurs. Certains utilisateurs l'utilisent comme mémo pour enregistrer certaines choses. Alors, comment supprimer complètement WeChat File Transfer Assistant ? Laissez-moi vous le présenter en détail ci-dessous. Comment supprimer complètement l'Assistant de transfert de fichiers WeChat ? Réponse : [WeChat]-[Appuyez longuement sur Assistant de transfert de fichiers]-[Supprimer ce chat]. Étapes spécifiques : 1. Ouvrez d'abord le logiciel WeChat. Après être entré dans la page d'accueil, nous trouvons [File Transfer Assistant] et maintenez enfoncé ; 2. Ensuite, une fenêtre contextuelle sera marquée comme non lue, épinglez le chat en haut, faites-le. ne pas afficher le chat et supprimer le chat Ici, nous pouvons cliquer sur [Supprimer ce chat] ;
Comment envoyer des fichiers à d'autres sur TikTok ? Comment supprimer les fichiers que j'ai envoyés à d'autres ?
Mar 22, 2024 am 08:30 AM
Sur Douyin, les utilisateurs peuvent non seulement partager les détails de leur vie et leurs talents, mais également interagir avec d'autres utilisateurs. Dans ce processus, nous devons parfois envoyer des fichiers à d'autres utilisateurs, tels que des images, des vidéos, etc. Alors, comment envoyer des fichiers à d’autres sur Douyin ? 1. Comment envoyer des fichiers à d'autres sur Douyin ? 1. Ouvrez Douyin et entrez dans l'interface de discussion où vous souhaitez envoyer des fichiers. 2. Cliquez sur le signe « + » dans l'interface de discussion et sélectionnez « Fichier ». 3. Dans les options de fichiers, vous pouvez choisir d'envoyer des images, des vidéos, de l'audio et d'autres fichiers. Après avoir sélectionné le fichier que vous souhaitez envoyer, cliquez sur « Envoyer ». 4. Attendez que l'autre partie accepte votre fichier. Une fois que l'autre partie l'aura accepté, le fichier sera transféré avec succès. 2. Comment supprimer les fichiers envoyés à d'autres sur Douyin ? 1. Ouvrez Douyin et saisissez le texte que vous avez envoyé.
