Discussion :

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Tyra3l]

Mon dieu des fois je me gifflerai.

Merci encore !