問題描述

就像這里的許多其他類似問題一樣，我正在編寫我的第一個 jQuery 插件.它旨在采用一個選擇元素并將選項替換為可單擊的列表元素，以用作樣本.我的主要功能運行良好，但我需要添加調用另一個方法的能力，這將禁用某些選項.我的問題是這樣做時，我需要綁定一些點擊元素并取消綁定其他元素.

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.

目前我的原始綁定包含在我的init"方法中的一個函數中.我需要能夠從另一個禁用"方法調用該函數.所以這里有一些代碼:

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);
            });

        }
};

這是我的問題:我需要在禁用每個選項之前調用綁定函數 - 但我無法從 disable 方法中訪問 fnBindOptions - 因為 fnBindOptions 包含來自設置"變量的回調，所以我可以也不要將它移到init"方法之外.

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?

謝謝！

推薦答案

解決這個問題的一種方法是把你的 defaults、settings 和 bindOptionsmethods 對象(或更廣泛范圍內的另一個對象)中的 code> 函數并相應地引用它們:

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);
        });
    }
};

這篇關于Jquery Plugins，從其他方法調用函數的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！