6
votes

Pourquoi l'alerte provenant de ma boucle renvoie-t-elle toujours la dernière valeur, et non par chaque valeur d'itération?

J'ai quelques boutons, qui sont stockés dans un tableau. Je bouffonne ensuite sur ce tableau pour ajouter un événement de clic à chaque bouton. Chaque clic alerte la valeur de i . Je m'attends à ce que les valeurs soient 1 , 2 , 3 et ainsi de suite, mais ils reviennent toujours comme une seule valeur, au cas où 3 .

Pouvez-vous expliquer pourquoi cela se produit et comment le réparer?

S'il vous plaît voir cette a jsfiddle . Code ci-dessous: xxx

veuillez l'expliquer comme tout simplement et clairement que vous pouvez - je suis un peu débutant à JavaScript et à la programmation.


7 commentaires

Commencez à lire sur Stackoverflow.com/questions/2568966/...


Pourquoi les questions qui ont été posées mille fois sont-elles éviscées?


Je dirais que vous ne voulez pas coder ces événements de cette façon de toute façon ...


@Alvaro vous devriez expliquer pourquoi il ne devrait pas au lieu de laisser ce commentaire vide là-bas.


En tant que programmation et en particulier à un débutant JavaScript, vous voudrez peut-être avoir quelques boissons avant de commencer à lire sur les fermetures. Votre cerveau va faire mal pendant un certain temps jusqu'à ce que vous commenciez à le comprendre.


@wrewdbeans Est-ce que cela fonctionne pour vous? Jsfiddle.net/fe55Y/6


WOW Cette question a le plus grand nombre de réponses avec les votes en baisse que j'ai jamais vus ...


3 Réponses :


11
votes

Au moment où vous cliquez sur le bouton i === 3 code>. Besoin de transmettre la valeur de i code> dans une fermeture:

for (var i = 0; i<theButtons.length; i++) { // do `var i` so the i is not global
    (function(index){
        $(theButtons[i]).on('click', function () {
           alert(index); // index === the value that was passed
        });
    })(i); // pass the value of i
}


11 commentaires

J'aimerais connaître la raison du bowvote? Juste avant que je considère à upvote


@roasted haha ​​je n'ai aucune idée :-p


Une seule chose, l'utilisation de Global 'I' devrait être notée.


Downvoted en raison de la plainte à propos de JQuery dans une autre réponse à la même question à la même question à l'aide d'une "fonction gonflée jQuery" ici.


.Cliquez sur Alias ​​et .Onclick Alias ​​appellent directement .on ('Cliquez sur', - Vous avez ajouté un gonflement inutile.


@Loktar qui est plutôt vindicatif ....


@defaultninja True, mais il a posté cette question dans la discussion JavaScript pour donner son attentat à sa bownvote chat.stackoverflow.com/transcript/ Message / 10714138 # 10714138 Je n'étais pas le vindicatif initialement.


@Loktar je n'appelais aucun attentat à la bowevote. Je faisais un commentaire, tout comme beaucoup d'autres ont sur l'utilisation de nombreuses fonctions JQuery quand elles ne sont pas nécessaires. Tout ce que j'ai fait était copier / coller le code OPS et expliquer ce qui n'allait pas et comment le réparer.


Merci @Neal, cela fonctionne parfaitement. Je pense que je devrai faire des recherches sur la fermeture!


@wrewdbeans heureux d'aider :-d


Merci beaucoup :)



1
votes

Bienvenue dans la programmation asynchrone et les variables globales!

Le problème que vous voyez ici est du fait que i est déclaré globalement dans ce cas, dans celui qui est accessible de n'importe quoi.

Alors, que se passe-t-il lorsque votre script est exécuté est:

  • boucle à travers la gamme de noms de classe
  • sur chaque itération, liez un clic sur le nœud correspondant, appelant la fonction anonyme que vous avez fournie

    Le problème ici est que la fonction que vous avez fournie est exécutée en dehors de votre boucle (par exemple, lorsque le clic se produit), la valeur de i est ce qu'il s'agissait dans la dernière itération, dans ce cas 2


3 commentaires

Rien n'est "asynch" ici ...


Hah, juste. Peut-être que "non procédural" est un meilleur choix de mots


Le rappel enregistré dans cliquez sur peut être vu comme un appel ASYNC ...



2
votes

Utilisez simplement chaque méthode: xxx

violon: http: // jsfiddle .NET / FE55Y / 4 /

MISE À JOUR:

convenu que . Achetez () n'est pas nécessaire pour ce qui a été demandé. Voici celui-ci sans utiliser .fe. () méthode. xxx


15 commentaires

@NEAL - Eh bien, si JQuery est utilisé quand même en utilisant .fe. () n'est ajouté à aucun gonfleur.


@ j08691 Cette réponse s'appuie sur le texte de l'élément DOM - qui est inutile? De plus, l'OP n'est pas une ness à travers des boutons Tous , mais il ne traverse qu'une gamme de boutons ...


Il a aussi sa question étiquetée .. et utilise déjà JQuery. Bien sûr, vous pouvez le faire dans pure JS, mais il n'y a aucune raison pour que cela soit évité.


Il ajoute un gonflement au traitement ... non que cela serait remarqué, mais NEALS commentaire est toujours un peu valide. Cependant, son utilisation de l'alias .Click est tout aussi stupide.


Le problème avec cette réponse est qu'il n'explique pas le problème dans le code d'origine, qui est au moins la moitié de la question réelle.


@Neal - Oh, je ne dis pas que c'est la bonne réponse, je dis simplement que si l'OP utilise JQuery que je ne vois pas où vient le goot. Si la question n'utilisait pas JQuery et cette réponse le suggéra alors un code supplémentaire inutile pour quelque chose de base.


Neal, s'il vous plaît expliquer comment est-il gonflé et s'il était, pourquoi les développeurs JQuery ont-ils construit une telle méthode? Et mon point principal est que si vous voulez écrire une fonction dans le style pure JS, quel est le besoin de jQuery?


@Learner C'est pourquoi il y a un normal boucle sur un tableau. Il n'y a pas de vraie raison d'utiliser $. Chaque surtout car il n'a même pas répondu à la question des OPS.


@ j08691 ^^ voir ci-dessus.


@NEAL Le questionneur a un tag "jQuery" et .Poreseach est une fonction pure JS et non jQuery. J'ai vu la balise et lui a fourni la solution JQuery. Quant à la deuxième partie "que je n'ai pas répondu à ce qui a été posé", c'est une chose totalement différente et ne devrait pas être mélangée avec $. Chercher une conversation.


@Learner et le $ (this) sélectionne encore et sur le gain? Cache-les!


Une autre chose que j'ai remarquée, c'est que certaines personnes viennent de voter sans compréhension, car une personne ayant des votes plus élevés n'est pas convaincue avec votre solution.


@Neal Dans cet exemple, la mise en cache $ (Ceci) ne va pas réellement avoir une incidence sur la performance (beaucoup le cas échéant).


@NEAL Je n'essaye pas de prouver mon point mais je ne me dis pas que nous sommes maintenant inquiets pour les résultats de la performance nanoseconde. Si c'était si important que personne ne devrait réellement utiliser jQuery.


Vous n'avez même pas besoin de chacun de toute façon dans ce cas. Il suffit d'alerter l'index du bouton. alerte ($ (ceci) .index (". bouton"));