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

Question

J'essaie de faire une boucle dans un tableau "fSel.sI", et en fonction des données à l'intérieur, je les passe en tant que valeurs (pas de référence) sur un certain nombre de déclarations de fonction. À l'heure actuelle, le problème est que mydrag contient une référence, et que l'on appelle draggable, il utilise les données du dernier élément de tableau. Par conséquent, lorsque start: drag: stop: est appelé, les valeurs ne sont pas uniques. Aidez-moi?

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 look into closures.

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 est avec les start, drag et stop fonctions. Ils ne s'exécutent pas immédiatement; Au moment où ils le font, mydrag a été défini sur une autre valeur. En encapsulant une fonction auto-exécutable autour du bloc de code contenant ces fonctions, nous créons une fermeture, où mydrag ne change pas. Pour des raisons de performances, lorsque vous accédez aux propriétés d'un objet plusieurs fois, 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 length à chaque fois autour de la boucle.

Answer 2

C'est parce que vous créez une fermeture. Essayez plutôt

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)) 
       }); 
     } 
    }, 

Jetez un oeil à cette vidéo pour comprendre les puissants et l'utilité des fermetures Javascript: http://vimeo.com/1967261