网站如何制作学校的做/网上商城网站开发

问题描述

开发一个 jquery 插件，监听 input 、select 元素，根据 其值 或者 其值 发生变化时，执行回调函数。

jquery 插件模板如下：

;(function($){$.fn.myPluginName = function(options, callback) {var defaults = {param1: "aaa",param2: "bbb"};var settings = $.extend(true, {}, defaults, options);return this.each(function(){			// some plugin works ..			callback();			});};
})(jQuery);

我写的回调函数：

;(function($) {$.fn.listenValue = function(callback) {return this.each(function() {var $this = $(this);//在页面加载完毕后，立即执行回调函数if (typeof(callback) == 'function') {callback();}// 监听值有变化时，执行回调函数$this.bind('input propertychange change',function(){if (typeof(callback) == 'function') {callback();}})});};
})(jQuery);

在下面使用时，出现问题。

$("#xxxx").listenValue(function(){var vv= $(this).val();console.log(vv)
})

$("#xxxx") 调用 listenValue方法时，在回调函数中，第二行的 this 代码会报错， this 不存在，无法使用 this 。

经过调试发现 this 不是指向 xxxx 元素，而是指向的是 window 。

解决方法

调用 回调函数，应该使用 callback.apply(this) ，使 回调函数 指定绑定的 当前元素。具体如下：

jquery 插件模板改进 如下：

;(function($){$.fn.myPluginName = function(options, callback) {var defaults = {param1: "aaa",param2: "bbb"};var settings = $.extend(true, {}, defaults, options);return this.each(function(){			// some plugin works ..			callback.apply(this, [options]);			});};
})(jQuery);

使用方式：

$('p').myPluginName( {thing: "thing1"} , function(opts){alert(opts.thing);
});​

我写的回调函数改进如下：

;(function($) {$.fn.listenValue = function(callback) {return this.each(function() {var $this = $(this);if (typeof(callback) == 'function') {callback.apply(this);}$this.bind('input propertychange change',function(){if (typeof(callback) == 'function') {callback.apply(this);}})});};
})(jQuery);

调用如下，

$("#xxxx").listenValue(function(){var vv= $(this).val();console.log(vv)
})

可以使用 $(this) ，不报错，并且 $(this) 指向的是 $("#xxxx")。

参考： https://www.it1352.com/1755368.html