Fatal编程技术网
  • jquery/
  • jquery插件无法访问插件定义中引用的对象

jquery插件无法访问插件定义中引用的对象

jquery jquery-plugins

jquery插件无法访问插件定义中引用的对象,jquery,jquery-plugins,Jquery,Jquery Plugins,我正在尝试编写一个插件，它可以对我选择的dom元素中某些输入字段的任何更改做出反应 我的插件定义如下： (function($){ var methods = { init : function( options ) { console.log(this.obj); var inputs = $('input', this.obj); $.each(inputs, function(i, domE

我正在尝试编写一个插件，它可以对我选择的dom元素中某些输入字段的任何更改做出反应

我的插件定义如下：

(function($){

    var methods = {
        init : function( options ) { 
            console.log(this.obj);
            var inputs = $('input', this.obj);
            $.each(inputs, function(i, domElement){
                $(this.obj).premiumUpdatable('addEvent', $(domElement));
            })

        },
        addEvent: function(element){
            $(element).bind('change',function(){
                console.log($(element).val());
            })
        }
    };

    $.fn.premiumUpdatable = function( method ) {

        return this.each(function(){
            var obj = $(this);
            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 {
                $.error( 'Method ' +  method + ' does not exist on jQuery.premiumUpdatable' );
            }    
        });
    };
})(jQuery);
然后我调用我的插件，如：

$('div.updatable').premiumUpdatable();
问题是，当我在一个定义的方法中尝试console.log（this.obj）时，我总是得到未定义的结果。我希望得到我在插件定义中的引用，obj=$（this）。。。我希望得到$（this）元素

我需要将这个插件应用于页面上的许多dom元素，但是如果我无法获得对dom元素的引用…我真的无法分辨哪个是哪个

任何帮助都将不胜感激

PS：我可能没有提出正确的问题，因为我对在jquery中开发插件还是新手，但这个问题似乎真的困扰着我，我无法克服。

当您这样做时，调用
init（）
方法：

return methods.init.apply( this, arguments );

this
是当前的DOM元素，您显然希望在
init（）
方法
this
中成为您的插件实例

另一个问题是，您的
obj
属性是在
.each（）
回调中声明的，因此它无论如何在
init（）
方法中都不可见

这里的链接提出了开发jquery插件的基本结构：

作为插件开发的补充，这里有一些关于javascript中“this”关键字的链接。真正理解这一点非常重要，我认为在开发时不要陷入无法理解的境地：



我将您的代码包装到了迄今为止我所能找到的最可靠的jquery插件结构中。这也将解决您无法访问插件范围内的对象的问题

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        (function($){
            $.premiumUpdatable = function(el, options){
                // set a reference to the class instance
                var base = this,
                    // store all inputs for reuse
                    inputs;

                // store the options in base.o
                base.o = $.extend({},$.premiumUpdatable.defaultOptions, options);
                // set a reference to the jquery object
                base.$el = $(el);
                // set a reference to the DOMNode
                base.el = el;

                /**
                 * @public
                 * This function can be accessed from outside the plugin scope with
                 * $('.premium').data('premiumUpdatable').publicFunction();
                 */
                this.publicFunction = function(){};

                var initInputs = function(){
                    inputs = $( 'input', base.$el.attr('id') ).each( function( i, domElement ){
                        $( domElement ).bind( 'change', function(){
                            console.log( 'input ' + $( this ).attr('id') + ' changed to: ', $( this ).val() );
                        });
                    });
                };

                /**
                 * @private
                 * self-executing constructor
                 */
                (function init(){
                    initInputs();
                })();
            };
            // defining the default options here makes it posible to change them globaly with
            // $.premiumUpdatable.defaultOption.myValue = 'value'
            // or
            // $.premiumUpdatable.defaultOption = { myValue:'value' }
            // before the first initialisation for the objects to come
            $.premiumUpdatable.defaultOptions = {};
            $.fn.premiumUpdatable = function(options){
                return this.each(function( index, element ){
                    // prevents a second initialisation of the object if data('premiumUpdatable') is already set
                    if ( undefined == $( element ).data('premiumUpdatable') ) {
                        // stores a referenze to the PluginClass, to that your able to access its public function from outside with
                        // $('.premium').data('premiumUpdatable').publicFunction();
                        $( element ).data('premiumUpdatable', new $.premiumUpdatable( element, options));
                    }
                });
            };
        })(jQuery);

        $( document ).ready( function(){
           $('.premium').premiumUpdatable();
        });
    </script>
</head>
<body>
   <div class="premium">
       <form>
           <input id="inputText" type="text" value="" /><br />
           <input id="inputPassword" type="password" value="" /><br />
           <input id="inputCheckbox" type="checkbox" value="something checked" /><br />
           <input id="inputRadio" type="radio" value="1" />
       </form>
   </div>
</body>
</html>


（函数（$）{
$.premiumUpdatable=函数（el，选项）{
//设置对类实例的引用
var base=这个，
//存储所有输入以供重用
投入；
//将选项存储在base.o中
base.o=$.extend（{}，$.premiumpdatable.defaultOptions，options）；
//设置对jquery对象的引用
基数.$el=$（el）；
//设置对DOMNode的引用
base.el=el；
/**
*@公众
*此函数可以从插件范围外通过
*$（'.premium'）.data（'PremiumUpDataable'）.publicFunction（）；
*/
this.publicFunction=function（）{}；
var initInputs=function（）{
输入=$（'input'，base.$el.attr（'id'））。每个（函数（i，doElement）{
$（domeElement）.bind（'change'，function（））{
log（'input'+$（this.attr（'id'）+'更改为：'，$（this.val（））；
});
});
};
/**
*@私人
*自执行构造函数
*/
（函数init（）{
初始化输入（）；
})();
};
//在这里定义默认选项，就可以用
//$.PremiumUpdateable.defaultOption.myValue='value'
//或
//$.premiumpdatable.defaultOption={myValue:'value'}
//在对即将到来的对象进行首次初始化之前
$.premiumpdatable.defaultOptions={}；
$.fn.premiumpdatable=函数（选项）{
返回此.each（函数（索引，元素）{
//如果已设置数据（'PremiumUpDataable'），则防止再次初始化对象
if（未定义==$（元素）.data（'premiumpdatable'））{
//存储对PluginClass的引用，使您能够使用从外部访问其公共功能
//$（'.premium'）.data（'PremiumUpDataable'）.publicFunction（）；
$（元素）.data（'premiumpdatable'，新的$.premiumpdatable（元素，选项））；
}
});
};
})（jQuery）；
$（文档）.ready（函数（）{
$（'.premium'）.premiumupdataable（）；
});