Question

我正在尝试开发我的第一个jQuery插件，我遇到了很多陷阱。插件本身是一种范围滑块，可以在一个页面上使用不同的设置处理多个实例。

无论如何，我遇到了很多问题，首先，我无法在启动后检索和更改我的插件设置。到目前为止，我已经使用谷歌和SO，现在我遇到了另一个问题。每个教程，解决方案都使用var $this = $(this), data = $this.data('name');来轻松访问插件选项/设置。我也使用它但不知何故我无法检索保存的数据。这是我的代码：

;(function ($) {
    var settings = {
        min: 20,
        max: 100,
        step: .1,
        vertical: false,
        defaultValue: 20,
        onMouseUpFn: function() {},
        onSlideChange: function() {}
    };

    var methods = {
        init: function (options) {
            return this.each(function() {
                var $this = $(this),
                    data = $this.data('slider');/*,
                    // won't work. why?
                    settings = {
                        min: 20,
                        max: 100,
                        step: .1,
                        defaultValue: 20,
                        vertical: false,
                        onMouseUpArea: false,
                        onMouseUpFn: function () {},
                        onSliderChange: function() {}
                    };*/

                if(options) {$.extend(settings, options); }

                if(!data) {
                    var defaultData = {
                        target:$this,
                        settings:settings,
                        slider:$this.find('.sliderrr'),
                        sliderWidth:$this.find('.sliderrr').width(),
                        valueText:$this.find('.sliderrr span')
                    };

                    data = $this.data('slider', defaultData);
                }

                console.log([
                    data.data('slider'),
                    $().jquery // "1.7.2"
                ]);
                /*[
                Object
                    settings: Object
                        defaultValue: "56.3"
                        max: "56.3"
                        min: 20
                        onMouseUpFn: function () {}
                        onSlideChange: function () {}
                        step: 0.1
                        vertical: false
                        __proto__: Object
                    slider: e.fn.e.init[1]
                    sliderWidth: 10
                    target: e.fn.e.init[1]
                    valueText: e.fn.e.init[1]
                    __proto__: Object
                ]*/

                if(data.settings.vertical) { // Uncaught TypeError: Cannot read property 'vertical' of undefined
                    data = $.extend(data, {
                        barOffset: $this.find('.barrr').offset().top,
                        barLength: $this.find('.barrr').height() - data.sliderWidth
                    });
                } else {
                    data = $.extend(data, {
                        barOffset: $this.find('.barrr').offset().left,
                        barLength: $this.find('.barrr').width() - data.sliderWidth
                    });
                }

                data.slider.mousedown(function(e) {
                    // slider's logic
                });

                $this.data('slider', data);
            });
        },
        setOptions: function(options) {
            return this.each(function() {
                var data = $(this).data('slider');
                var settings = data.settings; // Uncaught TypeError: Cannot read property 'settings' of undefined

                if(options) {
                    settings = $.extend(settings, options);
                    data = $.extend(data, settings);

                    $(this).data('slider', data);
                }
            });
        }
    };

    $.fn.sliderrr = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            return $.error('Method ' + method + ' does not exist in slider');
        }
    }
})(jQuery);

我添加了作为对象的注释和控制台日志的错误。这是jsFiddle版本：http://jsfiddle.net/RJkA2/

我现在已经搞乱了近2天，感谢任何帮助。

Answer 1

我更改了你的初始化函数：

if(!data) {
    var defaultData = {
        target:$this,
        settings:settings,
        slider:$this.find('.sliderrr'),
        sliderWidth:$this.find('.sliderrr').width(),
        valueText:$this.find('.sliderrr span')
    };
    $this.data('slider', defaultData); //setting data doesn't return the data!
    data=$this.data('slider');
}
console.log([$this.data('slider'), $().jquery]); //"data.data" was written here by mistake

这是jsfiddle：http://jsfiddle.net/RJkA2/1/

希望这有帮助！

Answer 2

我还会从您的代码中删除错误，现在它可以正常运行，演示：jsfiddle.net/RJkA2/2/

将jQueries插件数据保存到字符串将不起作用

2 个答案: