javascript - 具有多个实例的 jQuery 插件数据混合

Question

我正在尝试开发一个 jQuery 插件来显示自适应图片库。我正在使用 .data() 来存储图库中每张幻灯片的信息。

显示单个图库时一切似乎都正常，但当试图在单个页面上显示多个图库实例时会混淆。 A rough demo can be viewed here .

这是正在运行的代码:

(function($) {
    $.Gallery = function(element, options) {
        this.$el = $(element);
        this._init(options);
    };

    $.Gallery.defaults = {
        showCarousel : true,
    };

    $.Gallery.prototype = {
        _init : function(options) {
            var $this = $(this);
            var instance = this;

            // Get settings from stored instance
            var settings = $this.data('settings');
            var slides = $this.data('slides');

            // Create or update the settings of the current gallery instance
            if (typeof(settings) == 'undefined') {
                settings = $.extend(true, {}, $.Gallery.defaults, options);
            }
            else {
                settings = $.extend(true, {}, settings, options);
            }
            $this.data('settings', settings);

            if (typeof(slides) === 'undefined') {
                slides = [];
            }
            $this.data('slides', slides);

            instance.updateCarousel();
        },

        addItems : function(newItems) {
            var $this = $(this),
                slides = $this.data('slides');

            for (var i=0; i<newItems.length; i++) {
                slides.push(newItems[i]);
            };
        },

        updateCarousel : function() {
            var instance = this,
                $this = $(this);
                slides = $(instance).data('slides');

            var gallery = instance.$el.attr('id');

            /* Create carousel if it doesn't exist */
            if (instance.$el.children('.carousel').length == 0) {
                $('<div class="carousel"><ul></ul></div>').appendTo(instance.$el);
                var image = instance.$el.find('img');
            };

            var carouselList = instance.$el.find('.carousel > ul'),
                slideCount = slides.length,
                displayCount = carouselList.find('li').length;


            if (displayCount < slideCount) {
                for (var i=displayCount; i<slides.length; i++) {                    
                    slides[i].id = gallery + '-slide-' + i;
                    slide = $('<img>').attr({src : slides[i].thumb}).appendTo(carouselList).wrap(function() {
                        return '<li id="' + slides[i].id + '" />'
                    });

                    slide.on({
                        click : function() {
                            instance.slideTo($(this).parent().attr('id'));
                        },
                    });
                };
            };
        },

        slideTo : function(slideID) {
            var $this = $(this);
            var slides = $this.data('slides');
            var image;
            var $instance = $(this.$el);

            $(slides).each( function() {
                if (this.id == slideID){
                    image = this.img;
                };
            });

            $('<img/>').load( function() {
                $instance.find('div.image').empty().append('<img src="' + image + '"/>');
            }).attr( 'src', image );
        },
    };

    $.fn.gallery = function(options) {

        args = Array.prototype.slice.call(arguments, 1);

        this.each(function() {
            var instance = $(this).data('gallery');

            if (typeof(options) === 'string') {
                if (!instance) {
                    console.error('Methods cannot be called until jquery.responsiveGallery has been initialized.');
                }
                else if (!$.isFunction(instance[options])) {
                    console.error('The method "' + options + '" does not exist in jquery.responsiveGallery.');
                }
                else {
                    instance[options].apply(instance, args);
                }
            }
            else {
                 if (!instance) {
                    $(this).data('gallery', new $.Gallery(this, options));
                }
            }
        });
        return this;
    };

})(jQuery);

$(window).load(function() {
    $('#gallery2').gallery();
    $('#gallery3').gallery();

    $('#gallery2').gallery('addItems', [
        {
            img: 'images/image2.jpg',
            thumb: 'images/image2_thumb.jpg',
            desc: 'Image of number 2'
        },
        {
            img: 'images/image3.jpg',
            thumb: 'images/image3_thumb.jpg',
            desc: 'Image of number 3'
        },
        {
            img: 'images/image4.jpg',
            thumb: 'images/image4_thumb.jpg',
            desc: 'Image of number 4'
        },
        {
            img: 'images/image5.jpg',
            thumb: 'images/image5_thumb.jpg',
            desc: 'Image of number 5'
        }
    ]);

    $('.pGallery').gallery('addItems', [
        {
            img: 'images/2.jpg',
            thumb: 'images/2_thumb.jpg',
            desc: 'Image of number 0'
        },
        {
            img: 'images/image1.jpg',
            thumb: 'images/image1_thumb.jpg',
            desc: 'The second image'
        }
    ]);
    $('.pGallery').gallery('updateCarousel');
});

从表面上看，它似乎创建了两个具有适当幻灯片结构的画廊:

• 画廊2
  • 画廊 2-slide-0
  • 画廊 2-幻灯片 1
  • 画廊 2-幻灯片 2
  • 画廊 2-幻灯片 3
  • 画廊 2-幻灯片 4
  • 画廊 2-幻灯片 5
• 画廊3
  • 画廊 3-幻灯片 0
  • 画廊 3-幻灯片 1

但是，onclick 操作对 Gallery2 的最后两张幻灯片不起作用(幻灯片在两个画廊中重复)。在仔细检查 DOM 后，我可以看到存储在 gallery2 数据中的幻灯片具有以下 ID:

• 画廊2
  • 画廊 2-slide-0
  • 画廊 2-幻灯片 1
  • 画廊 2-幻灯片 2
  • 画廊 2-幻灯片 3
  • 画廊 3-幻灯片 0
  • 画廊 3-幻灯片 1

我不确定是什么原因导致混淆或如何修复，因此非常感谢您的帮助。谢谢

Answer 1

你的问题是调用 $('.pGallery').gallery('addItems'... 导致相同的对象被添加到两个画廊的内部结构中，当你调用 $('.pGallery').gallery('updateCarousel'); 存储在这些对象中的 ID 被覆盖。

您需要将原始对象的副本放在那里。做:

addItems : function(newItems) {
    var $this = $(this),
        slides = $this.data('slides');

    for (var i=0; i<newItems.length; i++) {
        //slides.push(newItems[i]);
        slides.push(jQuery.extend({}, newItems[i]));
    };
},

使用 jQuery.extend({}, oldObject) 你可以执行 shallow copy ;