Question

我对vars事件有点问题。所以我有一个插件whitch称为另一个插件，我想从被调用插件到主插件获得一个jquery元素......就像这样。

(function($) {
    $.fn.meRadioCheck = function(options, callback) {
        options = $.extend($.fn.meRadioCheck.defaults, options);
        var plugin = this;

        plugin.init = function() {
            return this.each(function() {
                var $this = $(this);
                var $span = $('<span/>');
                var name = $this.attr('name');

                /* here some stuff... */

                /* check for Events */
                if (($._data(this, "events") == null)) {

                    /* Change Event an Element binden */
                    $this.bind("xonChange", function() {
                        options.CheckBox_onChange.call($this)
                     });

                    $this.on({
                        change: function() {
                            /* here some stuff... */

                            /* throw Change Event */
                            $this.trigger("xonChange");
                        },
                    });
                };
            });
        }

        return this.each(function() {
            var $this = $(this);
            var name = $this.attr('name');

            if (options.checked != $this.prop('checked')) { $this.click(); } 
            if (options.disabled) { $this.prop('disabled', true) } else { $this.prop('disabled', false) }
        });
    };

    // Standard-Optionen für das Plugin
    $.fn.meRadioCheck.defaults = {
        'checked':  false,                                  /* This Checkbox or Radio Button is checked */
        'debug':    false,                                  /* Debug Modus für das Plugin ein od. ausschalten */
        'disabled': false,                                  /* This Checkbox or Radio Button is disabled */

        'CheckBox_onChange': function(el) {},
        'RadioButton_onChange': function(el) {}
    }
})(jQuery);



(function($) {
    $.panel = function(options, callback) {

        $('input[type=checkbox], input[type=radio]').meRadioCheck({

            CheckBox_onChange: function(el) {
                /* some stuff here... */
                window.console.debug('panel:  ' + typeof(el) + ', onChange: ', [el])
            }
        });
    }
})(jQuery);

我只在控制台中显示：面板：undefined，onChange：[undefined]

但我想获得CheckBox或RadioButton。我希望有人可以帮助我...

谢谢...并度过了愉快的周末。

Answer 1

怎么样：

(function($) {
    $.fn.meRadioCheck.defaults = {
        'debug':    false,             /* debug-mode for plugin */
        'checked':  false,             /* this checkbox or radio button is checked */
        'disabled': false,             /* this checkbox or radio button is disabled */
        'CheckBox_onChange': null,
        'RadioButton_onChange': null
    };
    $.fn.meRadioCheck = function(overrideOptions, callback) {
        var plugin = this,
            options = $.extend($.fn.meRadioCheck.defaults, overrideOptions);

        return this.each(function() {
            var $this = $(this),
                name = $this.attr('name');

            if ( !$this.data().meRadioCheckInitDone ) {
                $this.on("change", function() {
                    if (typeof options.CheckBox_onChange === "function") {
                        options.CheckBox_onChange.call(this);
                    }
                }).data("meRadioCheckInitDone", true);
            }

            $this.prop('checked', !!options.checked);
            $this.prop('disabled', !!options.disabled);
        });
    };
})(jQuery);

更改

摆脱.init()，似乎没有任何目的。
使用.data()变量而不是调用内部API函数来检查初始化是否通过。似乎更清洁。
摆脱了自定义xonChange事件 - 如果你所做的只是从那里调用另一个函数，那么直接听change也会有效。
为事件回调添加了typeof检查。
无条件地设置$this.prop()似乎比你做的if-then-else更清晰。

更一般地说，您似乎实现了某种数据绑定。也许正在寻找像knockout.js这样的数据绑定框架是值得的。

jquery vars参加活动

1 个答案: