如何实现一个方法来更新jquery插件中的选项

How to implement a method to update the options in a jquery plugin?

本文关键字：插件 jquery 更新 选项 一个 何实现 实现 方法      更新时间：2023-09-26

我试图调整一个jquery插件(https://raw.github.com/loopj/jquery-tokeninput/master/src/jquery.tokeninput.js)，以添加一个方法，将更新一个特定的默认设置(hintText)。

已经提供了一些方法:

var methods = {
    init: function(url_or_data_or_function, options) {
        var settings = $.extend({}, DEFAULT_SETTINGS, options || {});
        return this.each(function () {
            $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, settings));
        });
    },
    clear: function() {
        this.data("tokenInputObject").clear();
        return this;
    },
    add: function(item) {
        this.data("tokenInputObject").add(item);
        return this;
    },
    remove: function(item) {
        this.data("tokenInputObject").remove(item);
        return this;
    },
    get: function() {
        return this.data("tokenInputObject").getTokens();
    }
}

我加了这个:

updateHintText: function (hintText) {
     DEFAULT_SETTINGS.hintText = hintText;
}

这会更新它，但是，它不会在已经创建的实例上工作。例如，我这样调用这个方法:

$("#textbox1").tokenInput("updateHintText", 'updated hint');

但是当提示下拉框下次显示时，它仍然显示原来的提示:

function show_dropdown_hint () {
    if(settings.hintText) {
        dropdown.html("<p>"+settings.hintText+"</p>");
        show_dropdown();
    }
}

所以即使DEFAULT_SETTINGS。hintText得到更新，设置。hintText仍然引用实例化插件时传入的原始设置——这是有意义的。

你如何改变我的updateHintText()方法使设置。hintText会返回新的设置吗?现在，我所做的解决方法是创建一个新变量来保存新的设置值，并修改show_dropdown_hint()方法以使用这个新变量而不是设置。如果非空则为hintttext。但是我更喜欢使用settings对象。

谢谢。

这似乎是因为您附加了默认设置，而不是在init函数中从这行扩展的实际设置哈希值。

var settings = $.extend({}, DEFAULT_SETTINGS, options || {});

问题是这个设置哈希值在你的方法范围之外，所以你无法访问它。

尝试将设置的实例化移到init方法之外，这样您就可以访问它。然后你可以使用你的函数来修改它:

// Additional public (exposed) methods
var settings = {};
var methods = {
init: function(url_or_data_or_function, options) {
    settings = $.extend({}, DEFAULT_SETTINGS, options || {});
    return this.each(function () {
        $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, settings));
    });
},
updateHintText: function (hintText) {
     settings.hintText = hintText;
}
//..other methods...
相关文章：