Question

我创建了一个简单的JQuery扩展：

(function($) {
    $.fn.extend({
        GMselect: function(options){ 
            var defaults = {
                url: '',
                onSelect: function(){},
                loadData: function(url){
                    $.get(url || this.url).done(function(res){
                       var opts = '';
                       for (i in res){
                           opts += '<option value='+res[i].id+'>'+res[i].name + '</option>';
                       }
                       me.html(opts); 
                    });
                }
            };
            var options = $.extend(defaults, options);
            options.loadData();
            $(this).change( options.onSelect );
            var me = $(this);
        }
    });
}(jQuery));

通过这种方式，我可以轻松地创建从远程JSON源读取数据的select元素，如下所示：

$('#mySelect').GMselect({
    url: 'getData'
});

这部分很清楚，但是我想通过调用像

这样的方法知道动态重新加载select的方法。

$('#mySelect').reload(url)

任何帮助和评论都将不胜感激

Answer 1

我认为这可以使默认设置成为插件的私有对象，以便能够在所有函数中使用它（重用 loadData 函数）。

(function($) {

            var defaults = {
                url: '',
                onSelect: function(){},
                loadData: function(me,url){
                $.get(url || this.url).done(function(res){
                       var opts = '';
                       for (i in res){
                           opts += '<option value='+res[i].id+'>'+res[i].name + '</option>';
                       }
                       me.html(opts); 
                    });
                }
            };
            $.fn.extend({
                GMselect: function(options){ 
                    var me = $(this);
                    var options = $.extend(defaults, options);
                    options.loadData(me);
                    $(this).change( options.onSelect );
                },
                    reload:function(url){
                    var me = $(this);
                    defaults.loadData(me,url)
                }
            });
    }(jQuery));

使用GMSelect进行呼叫：

$("#mySelect").GMselect({url:"JSON.json"})

JSON.json档案：

[{"id":10,"name":"Apple"},{"id":45,"name":"Melon"},{"id":12,"name":"Kiwi"}]

<强>结果

Result

重新加载呼叫：

$("#mySelect").reload("JSON2.json")

JSON2.json档案：

[{"id":10,"name":"RED"},{"id":45,"name":"PURPLE"},{"id":12,"name":"BLACK"}]

<强>结果

Result

基本上所做的更改是在插件中添加函数reload并使defaults私有，以便在函数reload中的defaults.loadData(me,url)所有可用函数中使用它。

创建自定义JQuery对象和函数

1 个答案: