Question

我有一个我在项目中多次调用的函数：

function fillSelect(select) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Data.asmx/Status",
        dataType: "json",
        async: true,
        success: function(data) {
            $.each(data.d, function(i) {
                select.append('<option value=' + data.d[i].value + '>' + data.d[i].name + '</option>');
            });
        },
        error: function(result) {
            alert("Error occured. Contact admin");
        }
    });
}

然后在我的代码中，我正在使用它：

fillSelect($('select#status1'));
fillSelect($('select#status2'));
fillSelect($('select#status3'));

我想要做的是将我的函数转换为插件，所以我可以这样称呼它：

$('select#status1, select#status2, select#status3').fillSelect();

使用http://starter.pixelgraphics.us/我生成了空架构：

(function($) {
    $.ajaxSelect = function(el, select, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data("ajaxSelect", base);

        base.init = function() {
            base.select = select;

            base.options = $.extend({}, $.ajaxSelect.defaultOptions, options);

            // Put your initialization code here
        };

        // Sample Function, Uncomment to use
        // base.functionName = function(paramaters){
        // 
        // };

        // Run initializer
        base.init();
    };

    $.ajaxSelect.defaultOptions = {
        clear: false //append to select or replace current items
    };

    $.fn.ajaxSelect = function(select, options) {
        return this.each(function() {
            (new $.ajaxSelect(this, select, options));
        });
    };

})(jQuery);

但我不知道如何填写它我想做的是调用服务器，然后填写与参数一样多的选项这样一个小插件真的需要所有代码吗？

我知道这个功能可能有一些插件，但我想创建自己的插件，只是为了学习更多：）

Answer 1

你不需要你可以做的所有锅炉板如下

$.fn.fill = function fillSelect(options) {
   var self = this; 
   options = $.extend({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Data.asmx/Status",
            dataType: "json",
            async: true,
            success: function(data) {
               var list = "";
               $.each(data.d, function(i) {
                     list += '<option value=' 
                              + data.d[i].value + '>' 
                              + data.d[i].name 
                              + '</option>';
                  });
               self.filter("select").each(function(){
                   $(this).append(list);
               });
             },
            error: function(result) {
                alert("Error occured. Contact admin");
            }
          },options);
    $.ajax(options);
    return this;
}

首先注意到该函数被添加到jQuery原型/ $。fn中。然后更改成功处理程序，以便处理所有选定的元素，最后返回选择以使链接成为可能，因为这通常是在使用jQuery时所期望的。

上述代码将仅向所有选定的“select”元素添加相同的选项。如果您选择其他内容，则不会将选项附加到这些元素。

我已将签名更改为接受选项元素。在上面的版本中，默认的vesrion等于你的ajax选项。如果提供了其他值，则如果存在默认值，它们将覆盖默认值。如果默认值不存在，则值将添加到选项对象

Answer 2

您只需将方法添加到$.fn对象，如下所述：http://docs.jquery.com/Plugins/Authoring

this关键字将评估用于调用函数代码的jQuery选择器，因此不要在代码中使用select参数，只需使用this

将函数转换为插件

2 个答案: