jQuery插件开发,关于参数引用的疑问

发布于 2022-09-04 23:08:53 字数 2841 浏览 12 评论 0

我在init 初始化时 创建了一个 bgc 的参数,想在 destroy 方法中引起的话我该怎么做,找了很久也没找到相关的资料,
现在我外部调用调用的时候会提示 not defined,
调用的代码

$(function () {
            $('#btn1').pluginName('init');
            $('#btn2').pluginName('destroy', {
                bgc: '#0099ff'
            });
        });

下面是插件代码:

(function($) {
    var privateFunction = function() {
        // 执行代码
    }
 
    var methods = {
        init: function(options) {
 
            // 在每个元素上执行方法
            return this.each(function() {
                var $this = $(this);
 
                // 尝试去获取settings,如果不存在,则返回“undefined”
                var settings = $this.data('pluginName');
 
                // 如果获取settings失败,则根据options和default创建它
                if(typeof(settings) == 'undefined') {
 
                    var defaults = {
                        bgc: 'red'
                    }
                    settings = $.extend({}, defaults, options);
 
                    // 保存我们新创建的settings
                    $this.data('pluginName', settings);
                } else {
                    // 如果我们获取了settings,则将它和options进行合并(这不是必须的,你可以选择不这样做)
                    settings = $.extend({}, settings, options);
 
                    // 如果你想每次都保存options,可以添加下面代码:
                    // $this.data('pluginName', settings);
                }
 
                // 执行代码
                $this.on('click', function() {
                    $('div').css({
                        background: settings.bgc
                    });
                });
            });
        },
        destroy: function(options) {
            // 在每个元素中执行代码
            return $(this).each(function() {
                var $this = $(this);
                
                // 执行代码
                $this.on('click', function() {
                    $('div').css({
                        background: settings.bgc
                    });
                });
                // 删除元素对应的数据
                $this.removeData('pluginName');
            });
        },
        val: function(options) {
            // 这里的代码通过.eq(0)来获取选择器中的第一个元素的,我们或获取它的HTML内容作为我们的返回值
            var someValue = this.eq(0).html();
 
            // 返回值
            return someValue;
        }
    };
 
    $.fn.pluginName = function() {
        var method = arguments[0];
 
        if(methods[method]) {
            method = methods[method];
            arguments = Array.prototype.slice.call(arguments, 1);
        } else if( typeof(method) == 'object' || !method ) {
            method = methods.init;
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
            return this;
        }
 
        return method.apply(this, arguments);
 
    }
 
})(jQuery);

如果插件中不用data方法,是可以引用的,但在调用的时候如果同一个页面里有传入新的参数,那么两个btn实现的效果都一样了

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文