Question

我想从每个循环中访问this.options变量。我正在使用jQuery ui Widget Factory模式。

// etc..
,
_buildThumbs: function() {

$.each(this.options.photos, function( i, photo ) {

    // Modify template html...
    // ...


    $(this.options.containerThumbsClass).append( thumbnail );
    // Oh my, this.options is undefined :(
});

那么访问选项的最佳方式是什么？也许将类引用传递给每个方法？感谢。

Answer 1

那是因为jquery'each'函数有它自己的上下文。试试这个：

_buildThumbs: function() {
var localOptionsVariable = this.options;
$.each(this.options.photos, function( i, photo ) {    
    $(localOptionsVariable.containerThumbsClass).append( thumbnail );
});

但最好的方法是在你的插件中有一个返回选项对象的函数。例如，您可以在根元素data中存储选项。

[被修改]

(function ($) {
    var PLUGIN_NAMESPACE = "your-plugin-namespace";
    var defaultOptions = {
        someOption: 'DefaultOptionValue'
    };
    var isIE = /msie/.test(navigator.userAgent.toLowerCase());

    $.extend($.fn, {
        setTestPlugin: function (options) {
            options = $.extend({}, defaultOptions, options);
            return this.each(function () {
                var $container = $(this);
                $container.addClass(PLUGIN_NAMESPACE);
                $container.data("options", options);

                $container.val('Plugin applied!')
                $container.on('click', function(){
                  $container.someOtherFunction();
                });
            });
        },
        getOptions: function () {
            return this.data("options");
        },
        someOtherFunction: function () {
            var $container = this;
            var options = $container.getOptions();
            $.each([0], function(i, item){
              alert(options.someOption);
            });
            
        },
    });

})(jQuery);

$('#textBoxNewOption').setTestPlugin({someOption: 'New option value'});
$('#textBoxDefault').setTestPlugin();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="textBoxDefault" />
<input type="text" id="textBoxNewOption" />

从jQuery插件小部件中的每个访问类

1 个答案: