Question

我有一个对象image我可以执行image.top之类的操作，它会返回一个值，或者我可以执行image.myPoints[0].left并返回一个值。我基本上有这个图像对象为我存储值。我希望能够将多个image对象放在一个数组中，这样我就可以这样做：

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

我使用此函数创建对象，将针点添加到对象上。当调用mapImage函数时，会发生这种情况：

    $.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;
    ...}

这会设置图像属性，现在我想用我的应用程序修改特性，然后将这些image个对象保存到数组中。

我的问题是数组正在加载图像对象，但它似乎用我刚刚推入的对象填充整个数组，因此它不会保存我的旧图像对象。例如，如果我做myArray[0].myPoints[0].left，让我们说它重新打造30，然后我推送另一个myPoints [0] .left等于20的图像对象，我在数组中的第一个图像对象变为20如果这是一个解决这个问题的好方法，我将不胜感激。谢谢！

Answer 1

使用array.push(x)应将x添加到array的末尾。但是，它不会创建x的副本，因此如果您再次更改x和push()的属性，则您的数组将包含两个x的实例更新的属性 - 我怀疑这是你所看到的。（也就是说，您可能会更改top的{{1}}属性并再次image更改它，而不是创建全新的push()到image）

Answer 2

var myArray = new Array();

您需要使用“new”关键字。

Answer 3

我认为你使这比需要的更复杂。

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

小心jQuery.extend()，因为它不会递归操作，因此默认子阵列中的任何数组都将被选项数组中的那些完全覆盖，不合并。

如果您稍后需要访问精确定位数据，您可能希望通过执行this.data($.extend({}, $.fn.mapImage.defaults, options));之类的操作而不是重新分配选项变量来使用jQuery.data()。然后可以通过$('#toPinpoint').data('pinpoints')在任何地方访问给定元素的精确点，这将返回通过选项传递给mapImage()的相同数组。然后，您可以使用jQuery.each()遍历所有精确点。

如果我错过了你想要做的事情，请告诉我。

如何存储对象数组？

3 个答案: