jquery vars get to an event

Question

我对事件的变量有一点问题。所以我有一个叫做另一个插件的插件，我想从称为插件到主插件获取一个 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);

我只在控制台中得到这个：面板：未定义，更改：[未定义]

但我想获取复选框或单选按钮。我希望有人可以帮助我...

谢谢。。。并有一个愉快的周末。

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()似乎比你做的"如果那么"更干净。

在更一般的注释中，您似乎实现了某种数据绑定。也许研究像KNOCKOUT这样的数据绑定框架.js是值得的。