如何重复使用对象字面量

Question

我正在尝试重复使用我创建的对象，在页面上动态创建多个滑块。

我的想法是创建一个数组，并将我的滑块对象按需要推入其中，以便通过id访问它。不幸的是，它并没有起作用。希望有人能指点我正确的方向...

所以我现在的情况是：

var slider = {
  "init":function(slide_it){
    this.parent = $(slide_it);
    /Count Elements and create a navigation depending on the count etc./
  },
  "otherstuff":{...}
}

在我的(document).ready函数中，我创建了一个数组并用不同的滑块对象填充它，为手风琴添加了Ids并调用了init函数。

var slide_array = [];
var accordion_sections = $('#accordion > div').length;
for(var i = 0; i < accordion_sections; i++){
  slide_array.push(slider);
  $('#accordion').children('div').eq(i).attr('id', 'slide_it_'+ i);
  slide_array[i].init($('#slide_it_' + i).find('.slider'));
}

我有一个class为"next"的按钮，然后我在滑块内调用了一个函数。

$('.next').click(function(){
  slide_array[0].otherstuff();
});

我的计划是获取.next的父元素及其id，以便我可以使用slide_array[parentID].otherstuff();

但是...当我在for循环内多次调用init函数时，它没有正常工作。

更奇怪的是，某些函数调用似乎有效，而其他函数则没有效果。我做错了什么？

- user3605088

Answer 1

你可以使用 Object.create。

var s1 = Object.create(slider),
    s2 = Object.create(slider);

s1.init(...);
s2.init(...);

如果你从init返回this，那么你就可以像这样链接调用:

var s1 = Object.create(slider).init(...);

然而，此时我建议放弃对象字面量并使用构造函数，因为这是你所需要的。

function Slider(slide_it) {
    this.parent = $(slide_it);
}

Slider.prototype = {
    constructor: Slider,
    otherStuff: function () {}
};


var s1 = new Slider(...),
    s2 = new Slider(...);

- plalx

Answer 2

编写一个函数来返回对象：

function slider() {
  return {
    "init":function(slide_it){
      this.parent = $(slide_it);
      /Count Elements and create a navigation depending on the count etc./
    },
    "otherstuff":{...}
  };
}

然后：

slide_array.push( slider() );

这个方法每次都会返回一个独立的对象。在你的版本中，你填充数组的是同一个对象的引用。

- Pointy

---

非常感谢您的快速回复！我尝试了一下，似乎可以工作，但我仍然遇到了一些非常奇怪的行为。需要进一步分析我的代码 ;) - user3605088

Answer 3

为什么不将其转化为一个jQuery插件呢？

jQuery.fn.slider = function(options) {
    return this.each(function() {
        var sliderElem = $(this),
            settings   = $.extend({
                speed : 3000,
                something : 'other thing'
            }, options);

        otherStuff(sliderElem);
    });

    function otherStuff(elem) {

    }
}

$('#accordion > div').slider();

没有重复或绕过障碍，只需在集合上调用它，它就为每个元素创建一个新的滑块？

- adeneo

---

似乎更合乎逻辑的方式是前进。 - A. Wolff

@A.Wolff - 谢谢，我完全不确定这是否是一个选项，我在发布之前查看了那个对象和循环至少十次，所以很高兴有人同意我的想法。这似乎正是jQuery插件应该有用的地方？ - adeneo

非常感谢！我以前从未编写过jQuery插件。我会看一下并尝试一下。你们回答得如此之快，我感到不知所措。你们真棒！ - user3605088