Comment puis-je stocker un ensemble d'objets?

J'ai une image objet image je peux faire des choses comme image.top et elle renverra une valeur, ou je peux faire image.myPoints[0].left et elle renverra une valeur. J'ai essentiellement cet objet d'image qui stocke des valeurs pour moi. Je veux pouvoir mettre plusieurs objets d' image dans un tableau pour pouvoir faire quelque chose comme ça:

 $("#toPinpoint").mapImage({ useAjax: false, pinpoints: [ { "top": 50, "left": 280, "width": 200, "height": 200}, { "top": 0, "left": 0, "width": 300, "height": 74 } ] });

J'utilise cette fonction pour créer l'objet, les points d'intérêt sont ajoutés à l'objet. Lorsque la fonction mapImage s'appelle c'est ce qui se passe:

  $.fn.mapImage = function(options){ //Set user input options and defaults var optionConfig = $.extend({}, $.fn.mapImage.defaults, options); image=this; this.image = this; // Assign defaults this.previewMode = optionConfig.previewMode; this.pinpoints = optionConfig.pinpoints; image.pinpoints = optionConfig.pinpoints; image.pinpointCount = 0; image.selected = 0; ...}

Cela définit les propriétés de l'image et maintenant je souhaite modifier les propriétés avec mon application puis SAUVEZ ces objets d' image dans un tableau.

Mon problème avec cela est que le tableau est en cours de chargement avec des objets d'image, mais il semble compléter l'ensemble du tableau avec l'objet que je viens de faire, donc il ne sauvegarde pas mes anciens objets d'image. Par exemple, si je fais myArray[0].myPoints[0].left , disons qu'il retruns 30, puis je lance un autre objet d'image qui a myPoints [0] .left égal à 20, le premier objet d'image dans lequel j'ai Le tableau se transforme en 20 au lieu de le sauvegarder en 30. Si il y a une bonne façon de résoudre ce problème, il serait grandement apprécié. Je vous remercie!

L'utilisation de array.push(x) devrait ajouter x à la fin du array . Cependant, il ne créera pas une copie de x , donc si vous modifiez un attribut de x et push() , votre tableau contiendra deux instances de x avec l'attribut mis à jour. Je soupçonne que c'est ce que vous voyez. (C'est-à-dire que vous modifiez la propriété top de votre image et push() dessus push() à nouveau, au lieu de créer une toute nouvelle image pour push() ).

 var myArray = new Array();

Vous devez utiliser le mot-clé "nouveau".

Je pense que vous compliquez ce que vous avez besoin.

 (function($){ $.fn.mapImage = function(options) { var defaults = { /* your defaults here */ }; // Merge default options with passed in options and store options = ($.extend({}, defaults, options)); // Do other stuff }; })(jQuery); // Backup current pinpoints and modify the current one $('#toPinpoints').data('pinpoints-backup', $('#toPinpoints').data('pinpoints').splice()); $('#toPinpoints').data('pinpoints')[0].top = 100; // Push a new array of pinpoints $('#toPinpoints').data('pinpoints').push({"top": 100, "left": 50, "width": 200, "height": 150});

Faites attention avec jQuery.extend() car il ne fonctionne pas de manière récursive, de sorte que tous les tableaux qui se trouvent dans le sous-réseau par défaut seront complètement écrasés par ceux dans le tableau des options, non fusionnés.

Si vous devez accéder aux données des points précis plus tard, vous pouvez utiliser jQuery.data() en effectuant quelque chose comme this.data($.extend({}, $.fn.mapImage.defaults, options)); Au lieu de réaffecter la variable d'options. Les points d'intérêt pour un élément donné pourraient être accessibles n'importe où par $('#toPinpoint').data('pinpoints') qui renverra le même tableau que vous avez transmis via options à mapImage() . Vous pouvez ensuite traverser tous les points avec jQuery.each() .

Si je manque quelque chose de ce que vous essayez de faire, faites-le moi savoir.