jquery - 为插件中的选项指定设置不起作用？

Question

我是 jquery 插件的新手。我需要将 totalWidth 指定为选项，以便可以根据需要更改 scrollWidth。有人可以帮助我吗？

(function( $ ) {
    $.fn.scrollAnimation = function(options) {
            var totalWidth;
            var settings = $.extend( {
                                        'totalWidth'         :'totalWidth'
                                    }, options);

            return this.each(function() {

                    var element = $(this);
                    var offset_1 = $("ul li.list:first-child",element).position().left;
                    var offset_2 = $("ul li.list:nth-child(2)",element).position().left; 
                    var totalWidth =(offset_2-offset_1);





            $(".abc",element).click(function() {
                $(".images",element).not(":animated").animate({"scrollLeft":"-="+totalWidth},300);
                return false;
            });



            $(".def",element).click(function() {
                $(".images",element).not(":animated").animate({"scrollLeft":"+="+totalWidth},300);
                return false;
            });
         });
      };
})( jQuery ); 

Answer 1

像这样将设置添加到您的插件

$.fn.scrollAnimation.settings={property:'value',totalWidth:'somevalue'};

这将是您插件的默认设置。

您可以使用 $.extend 将用户给定选项和 $.fn.scrollAnimation.settings 的属性合并到一个对象中，从而优先于用户给定选项

$.extend({},$.fn.scrollAnimation.settings,options);

所以你更新的代码就像

(function( $ ,win, doc) {
    $.fn.scrollAnimation = function(options) {
            var totalWidth;
            var localsettings = $.extend( {},$.fn.scrollAnimation.settings,options);
                    ...
                    ...
                    ...
                 };

      $.fn.scrollAnimation.settings={property:'value',totalWidth:'somevalue'};
})( jQuery ,window,document,undefined);