1
votes

Boucler un événement de clic de bouton dans jQuery

Cette boucle ne semble pas fonctionner, je ne sais pas trop où je me trompe mais j'apprécierais toute aide.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

var j = 0;
for (j = 0; j < 10; j++) {
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

Fondamentalement, sur le clic du bouton, il devrait alerter le nombre de la boucle est jusqu'à (non?) mais il alerte juste '10' sur chacun d'eux?

Il est tard et Je sais que je dois faire quelque chose de mal, mais je ne peux pas penser quoi.

Voici un violon de ma boucle: https://jsfiddle.net/p8v5sejr/

javascript jquery html

1 commentaires

Copie possible de fermeture JavaScript dans les boucles - exemple pratique simple

5 Réponses :

1
votes

C'est parce que la boucle tourne, alors lorsque vous cliquez sur vos boutons, j est égal à 10 . Étant donné que vos valeurs proviennent des identifiants du bouton, vous pouvez l'utiliser à votre avantage:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

var j = 0;
for (j = 0; j < 10; j++) {
  $('#btn-' + j).click(function() {
    alert($(this).attr("id").split("btn-")[1]);
  });
}

1 commentaires

Aucun problème @FoxyFish - si ma réponse a résolu votre problème, veuillez le marquer comme accepté en cliquant sur la coche grise à gauche de ma réponse.

1
votes

Vous pouvez récupérer l ' id de l'élément cible actuel et analyser l'index.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

for (let index = 0; index < 4; index++) {
  $('#btn-' + index).click(function(e) {
    var value = parseInt(e.target.id.replace(/[\D+]/g, ''), 10);
    alert(value);
  });
}

0 commentaires

0
votes

Si vous effectuez la liaison d'événement dans une fonction, vous obtenez une fermeture en conservant la valeur.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

var j = 0;
for (j = 0; j < 10; j++) {
  addClick(j);
}

function addClick(j) {
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

0 commentaires

0
votes

Essayez ceci,

$( "button[id^=btn]" ).each(function(index) {
    $(this).on("click", function(){
        var idvalue = $(this).attr('id'); 

        //alert(index);
        //or
        idvalue = idvalue.replace("btn-","");
        alert(idvalue);
    });
});

0 commentaires

1
votes

Il s'agit de la portée de la fonction et de la portée du bloc

Utilisez simplement let pour déclarer i dans la boucle for

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) { // <-- use let
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

1 commentaires

C'est ce à quoi j'essayais de penser mais je n'arrivais pas à y penser! Laisser! J'ai besoin de sommeil 🤣