Cet article vise à résoudre le problème selon lequel lorsque JavaScript implémente la fonction d'augmentation ou de diminution de la quantité du panier, cela ne prend effet que sur le premier élément de la page. En analysant les causes des erreurs courantes et en fournissant une solution d'optimisation basée sur la délégation d'événements et la traversée du DOM, nous aidons les développeurs à mettre en ?uvre une fonction de contr?le de la quantité de panier réutilisable, simple et efficace. Dans le même temps, l’importance d’écrire une structure HTML efficace est soulignée.

Lors du développement d'un panier d'achat ou d'une page de détails d'un produit, il est souvent nécessaire de mettre en ?uvre la fonction d'augmentation ou de diminution des quantités. Une erreur courante est que lorsqu'il y a plusieurs produits sur la page, le code JavaScript ne fonctionne que pour le premier produit. Cela est généralement d? au fait que le code sélectionne uniquement le premier élément et ne gère pas correctement plusieurs éléments. Cet article explorera ce problème et fournira une solution plus efficace et réutilisable.

Analyse du problème

Le code initial essayait d'utiliser querySelectorAll pour obtenir tous les boutons, mais le problème persistait. Les principales raisons sont :

1. Problème de sélecteur?: l'utilisation d'un nom de classe numéroté (tel que .pqt-plus1) entra?ne la sélection par le code du premier élément.
2. Portée des variables?: des variables indépendantes sont créées pour chaque élément, ce qui entra?ne une mauvaise réutilisation du code et des difficultés de maintenance.

Solution?: délégation d'événements et traversée du DOM

Une solution plus élégante consiste à utiliser la délégation d'événements et la traversée du DOM. Cette approche améliore les performances et la maintenabilité du code en évitant d'avoir à ajouter des écouteurs d'événements pour chaque bouton.

Optimisation de la structure HTML?:

Tout d’abord, nous devons optimiser la structure HTML pour la rendre plus facile à manipuler. Supprimez les suffixes numériques des noms de classe et utilisez des noms de classe génériques. En même temps, utilisez l'attribut data pour stocker les valeurs croissantes et décroissantes. Et le problème selon lequel le div dans la structure HTML ne peut pas être localisé dans la balise span a été corrigé.

 <div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm gauche décembre btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    
    <span class="cart-button">
      <span class="added">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    
  </button></button></span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm gauche décembre btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    
    <span class="cart-button">
      <span class="added">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    
  </button></button></span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm gauche décembre btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    
    <span class="cart-button">
      <span class="added">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    
  </button></button></span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm gauche décembre btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    
    <span class="cart-button">
      <span class="added">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    
  </button></button></span>
</div>

Code Javascript?:

 document.querySelectorAll(".btn-sm").forEach(btn => {
  btn.addEventListener('clic', e => {
    let total = e.target.closest('.pls-moins').querySelector('.added');
    total.textContent = Math.max(0, parseInt(total.textContent, 10) parseInt(e.currentTarget.dataset.inc, 10));
  });
});

Explication du code?:

1. document.querySelectorAll(".btn-sm").forEach(btn => { ... }); : Sélectionnez tous les boutons avec le nom de classe .btn-sm et ajoutez des écouteurs d'événement pour chaque bouton.
2. e.target.closest('.pls-moins') : e.target est l'élément qui a déclenché l'événement (c'est à dire le bouton cliqué). close('.pls-moins') recherche jusqu'à l'élément ancêtre le plus proche qui a la classe .pls-moins.
3. .querySelector('.added') : Parmi les éléments .pls-moins trouvés, recherchez un élément avec le nom de classe .added qui affiche la quantité.
4. parseInt(total.textContent, 10) : convertit la quantité de contenu textuel en un entier. 10 représente le nombre décimal.
5. parseInt(e.currentTarget.dataset.inc, 10) : récupère la valeur de l'attribut data-inc sur le bouton cliqué et convertissez-la en entier. e.currentTarget pointe vers l'élément (c'est-à-dire le bouton) auquel l'écouteur d'événement est lié.
6. Math.max(0, ...) : Assurez-vous que la quantité n'est jamais inférieure à 0.

Résumer

En utilisant la délégation d'événements et la traversée du DOM, nous pouvons écrire du code JavaScript plus concis et maintenable pour gérer plusieurs éléments. Cette approche rend non seulement le code plus efficace, mais facilite également son extension et sa modification. N'oubliez pas que l'écriture d'une structure HTML valide est la clé de la mise en ?uvre de cette solution. évitez d'utiliser des noms de classe numérotés et utilisez des noms de classe génériques et des attributs de données pour stocker les informations pertinentes. Enfin, assurez-vous que votre structure HTML est valide.

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!