Comment passer d'éléments par valeur d'un tableau à une variable en Javascript

Question

J'essaie de parcourir un tableau "fSel.sI" et, en fonction des données qu'il contient, les transmet en tant que valeurs (et non en référence) à un certain nombre de déclarations de fonctions. À l'heure actuelle, le problème est que mydrag contient une référence et que, comme draggable est appelé, il utilise les dernières données d'élément de tableau. Par conséquent, lorsque start: drag: stop: est appelée, les valeurs ne sont pas uniques. Aide?

makeDraggable : function() {
        // create new draggable
        for (var i = 0; i < fSel.sI.length; i++) {
            mydrag = fSel.sI[i];
            $("#" + mydrag).draggable({
                cancel: [''],
                distance: 5,
                containment: "#fWorkspace",
                handle: mydrag,
                start: function() { dragRegister(mydrag)},
                drag: function() { dragItems(mydrag)},
                stop: function() { dragStop(mydrag)}
            });
        }
    },

Answer 1

Vous devez examiner les fermetures .

Essayez le code suivant:

makeDraggable : function() {
        // create new draggable
        for (var i = 0, l = fSel.sI.length, sI = fSel.sI; i < l; i++) {
                var mydrag = sI[i];
                (function(mydrag) {
                            $("#" + mydrag).draggable({
                                    cancel: [''],
                                    distance: 5,
                                    containment: "#fWorkspace",
                                    handle: mydrag,
                                    start: function() { dragRegister(mydrag); },
                                    drag: function() { dragItems(mydrag); },
                                    stop: function() { dragStop(mydrag); }
                            });
                })(mydrag);
         }
},

Votre problème concerne les fonctions start , glisser et stop . Ils n'exécutent pas immédiatement; à ce moment-là, mydrag a été défini sur une autre valeur. En encapsulant une fonction à exécution automatique autour du bloc de code contenant ces fonctions, nous créons une fermeture, dans laquelle mydrag ne change pas.

Remarque: Pour des raisons de performances, lorsque vous accédez plusieurs fois aux propriétés d'un objet, il est préférable de créer une variable qui référence (ou conserve) la propriété. Dans votre boucle for , j'ai créé deux variables l et sI qui stockent fSel.sI.length et fSel.sI (respectivement) afin que JavaScript n'ait pas à rechercher les propriétés sI et longueur à chaque fois autour de la boucle.

Answer 2

Cela est dû au fait que vous créez une fermeture. Essayez ceci à la place

makeDraggable : function() {
        // create new draggable
        for (var i = 0; i < fSel.sI.length; i++) {
                mydrag = fSel.sI[i];
                $("#" + mydrag).draggable({
                        cancel: [''],
                        distance: 5,
                        containment: "#fWorkspace",
                        handle: (function(mydrag){return mydrag;}(mydrag)),
                        start: (function(mydrag){return function() { dragRegister(mydrag)};}(mydrag)),
                        drag: (function(mydrag){return function() { dragItems(mydrag)};}(mydrag)),
                        stop: (function(mydrag){return function() { dragStop(mydrag)};}(mydrag))
                });
        }
    },

Regardez cette vidéo pour comprendre la puissance et l’utilité des fermetures Javascript: http://vimeo.com/1967261