Question

我正在尝试将我的脚本变成插件（下面的代码），但不确定我在哪里出错，有人能指出我正确的方向吗？我没有在网页上收到任何错误，因此无法查看可能出现的错误。

;(function ( $, window, document, undefined ) {

    "use strict";

        var pluginName = "WHLightbox",
                defaults = {
                overlay: $('.portfolio-tile--overlay'),
            imageCell: $('.cell-image, .portfolio-tile--image')
        };

        $.extend(Plugin.prototype, {
            init: function() {
                this.events();
                this.buildImageData();
            },

            events: function() {
                var self = this;
                this.settings.imageCell.on('click tap', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    // set up the overlay
                    // self._positionOverlay();
                    self._openOverlay();
                    self._preventScrolling();

                    // create the image slide
                    self._createImageSlide($(this));


                });
                $('.portfolio-tile--overlay--close').on('click tap', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $('.portfolio-tile--overlay').removeClass('open');
                    $('html, body').removeClass('no-scroll');
                });
                $('.portfolio-tile--overlay--controls--prev, .portfolio-tile--overlay--controls--next').on('click tap', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                });

                $('.portfolio-tile--overlay--controls--prev').on('click tap', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    self.showPrev();
                });

                $('.portfolio-tile--overlay--controls--next').on('click tap', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    self.showNext();
                });
            },


            // public functions
            showPrev: function() {
                var index = this.currentImageIndex();
                if(index === 0) {
                    index = this.data.images.length;
                }
                this._createImageSlide(false, index-1);
            },
            showNext: function() {
                var index = this.currentImageIndex();
                if(index === this.data.images.length-1) {
                    // set to -1 because it adds 1 in the _createImageSlide call
                    index = -1;
                }
                this._createImageSlide(false, index+1);
            },

            currentImageIndex: function() {
                if(this.settings.overlay.hasClass('open')) {
                    var imageUrl = $('.portfolio-tile--main-image').attr('src');

                    for(var i=0; i<this.data.images.length; i++) {
                        if(this.data.images[i].imageUrl === imageUrl) {
                            return i;
                        }
                    }

                } else {
                    return false;
                }
            },


            // image data
            buildImageData: function() {
                var self = this,
                        i = 0;
                this.settings.imageCell.each(function() {
                    self.data.images[i] = {
                        imageUrl: self._getImagePath($(this))
                    }
                    i++;
                });
            },


            // slide
            _createImageSlide: function($el, index) {
                var imagePath;
                if(!$el) {
                    imagePath = this.data.images[index].imageUrl;
                } else {
                    imagePath = this._getImagePath($el);
                }
                this.settings.overlay.find('.portfolio-tile--main-image').attr('src', imagePath);
            },

            _getImagePath: function($el) {
                var imagePath,
                        spanEl = $el.find('span.js-cell-image-background'),
                        imgEl = $el.find('img.cell-image__image');
                if(spanEl.length) {
                    imagePath = spanEl.css('backgroundImage');
                    imagePath = imagePath.replace('url(', '').replace(')', '');
                } else if(imgEl.length) {
                    imagePath = imgEl.attr('src');
                }

                return imagePath;

            },

            // overlay
            // _positionOverlay: function() {
            //  this.settings.overlay.css({
                    // position the overlay to current scroll position
            //    top: $(window).scrollTop()
            //  });
            // },
            _openOverlay: function() {
                this.settings.overlay.addClass('open');
            },
            _preventScrolling: function() {
                $('html, body').addClass('no-scroll');
            },
            _reInitScrolling: function() {
                $('html, body').removeClass('no-scroll');
            },
            _closeOverlay: function() {
                this.settings.overlay.removeClass('open');
                this._reInitScrolling();
            }
        });

        $.fn[ pluginName ] = function ( options ) {
                return this.each(function() {
                        if ( !$.data( this, "plugin_" + pluginName ) ) {
                                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
                        }
                });
        };

})( jQuery, window, document );

Answer 1

可能这个：

var pluginName = "WHLightbox",
    defaults = {
        overlay: $('.portfolio-tile--overlay'),
        imageCell: $('.cell-image, .portfolio-tile--image')
    };

现在看来，这将在解释脚本时运行，这意味着它完全可能/可能是DOM未准备就绪或未加载，因此找不到defaults.overlay和defaults.imageCell。你应该把那些东西移到init。

可能还有其他问题但我不知道并且没有标记就无法测试它。通常我会把它留作评论，但它有点冗长。

将JS脚本转换为插件

1 个答案: