Question

我正在使用jQuery样板作为插件模式
有关jQuery样板的更多信息，请访问：https://github.com/jquery-boilerplate/boilerplate/

我想传递一个元素作为默认选项，但我无法访问它这是（简化）代码：

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

    /*creating the default settings*/
    var pluginName = 'pluginName',
        defaults = {
            nextElem:$('#right') 
        };
    console.log(defaults.nextElem); // return : Object[] , not cool

    /*merging default and options, then calling init*/
    function Plugin( element, options ) {
        this.options = $.extend( {}, defaults, options);
        this.init();
    }
    Plugin.prototype = {
        init: function() {
            /*trying to access the default nextElem */
            console.log(this.options.nextElem); // return : Object[] , not cool
            console.log(this._defaults.nextElem); // return : Object[] , not cool
            this.options.nextElem = $('#right');
            console.log(this.options.nextElem);// return : Object[div#right] , cool
        }
    };

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

和HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery1.8.3.js"></script>
        <script type="text/javascript" src="js/pluginName.js"></script>
    </head>
    <body>
    <script>
    $(function(){
        $('#img').PluginName();
    });
    </script>
    <div id="img"></div>
    <div id="right"></div>
    </body>
</html>

为什么两个3 console.log(this.options.nextElem)没有返回我的jQuery对象？

Answer 1

您似乎在document.ready之前运行了插件的代码。

即使您在文档准备就绪之后只是调用您的插件函数，您的插件函数本身在此之前运行; $('#right')的初始调用是在document.ready之前完成的。

另一种方法是传递字符串而不是实际对象：

var pluginName = 'pluginName',
    defaults = {
        nextElem: '#right'
    };

function Plugin( element, options ) {
    this.options = $.extend( {}, defaults, options);
    this.options.nextElem = $(this.options.nextElem);
    this.init();
}

jQuery Boilerplate传递元素作为选项

1 个答案: