Jquery插件,从其他方法调用函数

发布于 2024-11-05 14:12:20 字数 1909 浏览 0 评论 0原文

就像这里的许多其他类似问题一样,我正在编写我的第一个 jQuery 插件。 它的目的是采用选择元素并将选项替换为可单击的列表元素,以用作样本。 我的主要功能运行良好,但我需要添加调用另一个方法的功能,这将禁用某些选项。 我的问题是,执行此操作时,我需要绑定一些单击元素并取消绑定其他元素。

目前,我的原始绑定包含在“init”方法内的一个函数中。我需要能够从另一个“禁用”方法调用该函数。 所以这里有一些代码:

(function($){

var methods = {

    // Init method
        init    : function(options) {
            // Set options
            var
                defaults = {
                        clickCallback:  function(){} // Define empty function for click callback
                  }
            ,   settings = $.extend({}, defaults, options)


            // Function to bind options
            function fnBindOptions(var1, var2, var3) {
                // Stuff to bind elements

                    // Hit the click callback
                    settings.clickCallback.call(this); 

            }   

            return this.each(function() {

                // Check that we're dealing with a select element
                if(element.is('select')) {

                    // Loop through the select options and create list items for them
                    $('option', element).each(function() {

                        // Stuff to create list elements

                        // Bind click handler to the new list elements
                        fnBindOptions(var1, va2, var3);
                    });

                }

            });

            // return 
            return this();              
        }


    // Disable buttons method
    ,   disable : function(options) {

            // I need to access fnBindOptions from here
            $(elementID).children('li').removeClass('disabled').each(function(){
                fnBindOptions(var1, var2, var3);
            });

        }
};

这是我的问题:我需要在禁用每个选项之前调用绑定函数 - 但我无法从禁用方法中访问 fnBindOptions - 并且因为 fnBindOptions 包含来自“settings”变量的回调,所以我也不能将其移出“init”方法。

那么,这里有人有什么建议吗?

谢谢!

Like so many other similar questions on here, I am writing my first jQuery plugin.
It's intended to take a select element and replace the options with clickable list elements, to be used as swatches.
I've got the main functionality working great, but I need to add the ability to call another method, which will disable certain options.
My problem is that when doing this, I need to bind some click elements and unbind others.

Currently my original binding is contained in a function inside my 'init' method. I need to be able to call that function from another 'disable' method.
So here's some code:

(function($){

var methods = {

    // Init method
        init    : function(options) {
            // Set options
            var
                defaults = {
                        clickCallback:  function(){} // Define empty function for click callback
                  }
            ,   settings = $.extend({}, defaults, options)


            // Function to bind options
            function fnBindOptions(var1, var2, var3) {
                // Stuff to bind elements

                    // Hit the click callback
                    settings.clickCallback.call(this); 

            }   

            return this.each(function() {

                // Check that we're dealing with a select element
                if(element.is('select')) {

                    // Loop through the select options and create list items for them
                    $('option', element).each(function() {

                        // Stuff to create list elements

                        // Bind click handler to the new list elements
                        fnBindOptions(var1, va2, var3);
                    });

                }

            });

            // return 
            return this();              
        }


    // Disable buttons method
    ,   disable : function(options) {

            // I need to access fnBindOptions from here
            $(elementID).children('li').removeClass('disabled').each(function(){
                fnBindOptions(var1, var2, var3);
            });

        }
};

Here's my problem: I need to call the bind function on each option before disabling it - but I can't access fnBindOptions from within the disable method - and because fnBindOptions includes a callback from the 'settings' variable, I can't move it outside of the 'init' method either.

So, does anyone have any advice here?

Thanks!

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

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

万人眼中万个我 2024-11-12 14:12:20

解决此问题的一种方法是将您的 defaultssettingsbindOptions 函数放入 methods 对象(或另一个更广泛范围内的对象)并相应地引用它们:

var methods = {
    defaults: {
        clickCallback: function() {}
    },
    settings: {},

    bindOptions: function(var1, var2, var3) {
        // Stuff to bind elements
        // Hit the click callback
        methods.settings.clickCallback.call(this);
    },

    // Init method
    init: function(options) {
        methods.settings = $.extend({}, methods.defaults, options);

        return this.each(function() {
            if (element.is('select')) {
                $('option', element).each(function() {
                    // Stuff to create list elements
                    // Bind click handler to the new list elements
                    methods.bindOptions(var1, va2, var3);
                });
            }
        });
    },

    // Disable buttons method
    disable: function(options) {
        $(elementID).children('li')
                    .removeClass('disabled')
                    .each(function() {
            methods.bindOptions(var1, var2, var3);
        });
    }
};

One way to solve this is to put your defaults, settings and bindOptions function in the methods object (or another object in the broader scope) and reference them accordingly:

var methods = {
    defaults: {
        clickCallback: function() {}
    },
    settings: {},

    bindOptions: function(var1, var2, var3) {
        // Stuff to bind elements
        // Hit the click callback
        methods.settings.clickCallback.call(this);
    },

    // Init method
    init: function(options) {
        methods.settings = $.extend({}, methods.defaults, options);

        return this.each(function() {
            if (element.is('select')) {
                $('option', element).each(function() {
                    // Stuff to create list elements
                    // Bind click handler to the new list elements
                    methods.bindOptions(var1, va2, var3);
                });
            }
        });
    },

    // Disable buttons method
    disable: function(options) {
        $(elementID).children('li')
                    .removeClass('disabled')
                    .each(function() {
            methods.bindOptions(var1, var2, var3);
        });
    }
};
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文