在 jquery 插件的事件函数中获取一个变量

Question

我使用 jQuery 为我的项目开发了一个插件。在这个插件中，我使用了一个滑块插件，它在我的插件初始化时进行初始化。我将它分配给插件中的 public 变量。并且有一个事件绑定到一个元素，当用户输入一定数量时会触发该事件。基本上，滑块根据在输入元素中输入的值而变化。但问题是，当 keyup 事件被触发时，我分配给滑块的变量是未定义的。我该如何解决这个问题。

inti 方法

var init = function() {
        plugin.settings = $.extend({}, defaults, options);

        set_default_values();

        this.slider = $(plugin.settings.sliderElements).slider();

        $(plugin.settings.sliderElements).on("slide", plugin.settings.onPluginSlide);
        $(plugin.settings.numOfMonthsKey).on("keyup", function(e){
            plugin.settings.onMonthKeyEnter(e,this.slider);
        });
}

事件

var defaults = {
        sliderElements: '#numOfMonths', //comma seperated jquery selectors
        perMonthAmountElement: '.perMonth',
        numOfMonthsElements: '.numOfMon', //comma seperated jquery selectors
        sumOfRecItemElement: '.sumOfRecItems',
        monthlyCostElement: '.monthlyCost',
        oneTimeFeeElement: '.oneTimeFee',
        nextInvoiceAmountElement: '.nextInvoiceAmount',
        numOfMonthsKey: '.numOfMonthsKey',
        oneTimeFee : 0,
        sumOfRecurringItems : 0,
        interestRate: 0.2,
        currency : 'kr', //This is just to display 
        onPluginSlide: function(sliderEvent){
            $(plugin.settings.numOfMonthsElements).text(sliderEvent.value);
            $(plugin.settings.perMonthAmountElement).text(calc_compound_interest_rate(plugin.settings.oneTimeFee,plugin.settings.interestRate,sliderEvent.value));
            $(plugin.settings.monthlyCostElement).text(plugin.settings.sumOfRecurringItems + amount_per_month(sliderEvent.value));
        },
        onMonthKeyEnter: function(keyEvent,slider){
            slider.slider('setValue', keyEvent.getCurrentTarget.value ,true)
        }
    }

如何在插件初始化后访问滑块对象。我想到了使用 window 变量 bt 我不知道它是好是坏。

如有任何帮助，我们将不胜感激。

Answer 1

'this' 关键字的上下文在事件中发生变化。在 JavaScript 中使用 'this' 关键字可能会有点混乱，我建议阅读以下答案 - How does the "this" keyword work? .

我会避免使用 window（全局）变量，它们很容易与您将来可能 using/use 的其他 JavaScript 库发生冲突。

您可以尝试在 init 函数中创建一个 self 变量（或您认为合适的任何其他名称），然后用它代替 'this' 关键字。这将避免 'this' 关键字根据上下文具有不同值的问题，您的 self 变量将始终相同。

var init = function() {
    var self = this;
    self.slider = $(plugin.settings.sliderElements).slider();

    $(plugin.settings.numOfMonthsKey).on("keyup", function(e){
        plugin.settings.onMonthKeyEnter(e,self.slider);
    });
};

在 jquery 插件的事件函数中获取一个变量

Get a variable inside an event function of a jquery plugin

javascript

jquery

plugins

dom

jquery-plugins