Maison > interface Web > js tutoriel > Fonction de panier d'achat implémentée par JQuery (peut réduire ou ajouter des produits et calculer automatiquement les prix)_jquery

Fonction de panier d'achat implémentée par JQuery (peut réduire ou ajouter des produits et calculer automatiquement les prix)_jquery

WBOY
Libérer: 2016-05-16 16:20:30
original
1636 Les gens l'ont consulté

Cliquez sur le panier pour réduire ou ajouter des articles et calculer automatiquement le prix :

Le panier peut avoir une telle fonction, c'est-à-dire que cliquer sur un bouton peut réduire ou augmenter le nombre de marchandises, et le prix total du produit peut être calculé en temps réel. Voici un exemple de code pour présenter comment mettre en œuvre. cette fonction. Bien sûr, le panier suivant implémenté par cette simulation est difficile à réaliser, mais vous pouvez en tirer de l'inspiration ou des points de connaissances associés. Le code est le suivant :
.

Copier le code Le code est le suivant :





Accueil du script







Prix unitaire :1,50
        
        
        



Prix unitaire :3,95
        
        
        


Prix total :







Le code ci-dessus implémente une fonction de panier simple. Voici une introduction détaillée à son processus de mise en œuvre.
Commentaires du code :

1.$(function(){}), lorsque la structure du document est complètement chargée, exécutez le code dans la fonction.

2.$(".add").click(function(){}), enregistrez la fonction de gestionnaire d'événements de clic pour le bouton plus.

3.var t=$(this).parent().find('input[class*=text_box]'), récupère la zone de texte, ce texte affiche le nombre de biens à acheter.

4.t.val(parseInt(t.val()) 1), cliquez une fois pour augmenter la quantité du produit de 1.

5.setTotal(), l'exécution de cette fonction peut calculer le prix total et l'afficher.
6.$(".min").click(function(){}), enregistrez la fonction de gestionnaire d'événements de clic pour le bouton moins.
7.function setTotal(){}, cette fonction peut calculer le prix total et l'afficher.
8.var s=0, déclarez une variable, cette variable sert à stocker le prix total.
9.$("#tab td").each(function(){
s =parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text() );
});
Vous pouvez parcourir les zones de texte et multiplier par le prix unitaire, puis les additionner et enfin calculer le prix total.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal