Bouton dans une boucle PHP : Lors de l'appel de la fonction jQuery toutes les valeurs sont mises à jour [Résolu]

[Tyra3l]

Bonjour,

Je viens vers vous car j'ai un problème que je n'arrive pas à résoudre.
En effet, j'ai une boucle PHP (foreach...) dans laquelle je crée une <div> qui elle-même contient deux boutons "+" et "-" ainsi qu'un champ input texte permettant de rentrer une quantité.

Le fonctionnement vous l'aurez deviné est lorsque je clique sur le bouton - la valeur se décrémente et inversement avec le bouton +.
Jusque là rien de très compliqué, mon problème intervient lorsque ma boucle foreach me ramène plusieurs éléments : Si je clique (admettons) sur le bouton "-" du 3è élément retourné, TOUS les éléments vont être modifiés en même temps, alors que je ne veux modifier que le 3ème...

Je vous colle quelques petits morceaux de codes afin d'illustrer mon explication :

Code PHP :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<?php
foreach($blabla as $key => $blibli):?>
 
Qté
<div class="spinner">
  <input type="button" id="<?php echo "buttonSpinnerMinus".$key; ?>" class="buttonSpinnerMinus"><img src="images/moins.png" width="18" height="18" alt="Quantité Moins" />
 
  <input name="quantiteEntree" id="<?php echo "quantity".$key; ?>" class="quantity" value="<?php echo $blibli->getAttribut(); ?>" type="text" />
 
  <input type="button" id="<?php echo "buttonSpinnerPlus".$key; ?>" class="buttonSpinnerPlus"><img src="images/plus.png" width="16" height="18" alt="Quantité Plus" />
<?php endofreach; ?>

Code jQuery

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
$(document).ready(function() {
      $(".buttonSpinnerPlus").live('click', function(){
        var multiple = Session.multiple;
        /**
         * Récupération de l'id du bouton
         */
        var lengthIdSpinner = $(this).attr('id').length;
        /**
         * Récupération de l'index dans la boucle PHP
         */
        var indexIdSpinner = $(this).attr('id').substr(lengthIdSpinner-1, lengthIdSpinner);
        var spinnerDiv = $(this).parent(".spinner");
        var input = spinnerDiv.find(".quantity").val();
        /**
         * Récupération de l'id de l'input
         */
        var lengthIdInput = $(this).parent(".spinner").find(".quantity").attr('id').length;
        /**
         * Récupération de l'index de l'input dans la boucle PHP
         */
        var indexIdInput = $(this).parent(".spinner").find(".quantity").attr('id').substr(lengthIdInput-1, lengthIdInput);
 
        if(indexIdSpinner == indexIdInput) {
          inputInt = parseInt($(".quantity").val());
          if(inputInt < multiple) {
            inputInt = multiple;
          } else {
            inputInt = inputInt + multiple;
          }
          $(".quantity").val(inputInt);
        }
      });

La fonction jQuery "Minus" est sensiblement la même en décrémentant au lieu d'incrémenter.

Pourriez-vous m'aider à débugger mon problème ?

Merci d'avance.

[Bovino]

TOUS les éléments vont être modifiés en même temps, alors que je ne veux modifier que le 3ème...

Ben oui mais tu ne le précises pas dans le code :

Code :

$(".quantity").val(inputInt);

D'autant plus étonnant que tu le fais avant :

Code :

$(this).parent(".spinner").find(".quantity")

[Tyra3l]

Mon dieu des fois je me gifflerai.

Merci encore !