Question

我正在构建一个jQuery插件。

调用插件

$('#box').jQueryPlugin({user:'user123'});

JQUERY PLUGIN

(function($){  
    $.fn.jQueryPlugin= function(options) {  

        var  
          defaults = {  
            user: ''
          }

            var options = $.extend(defaults, options);
            var o = options; 

             $.ajax({
               type: "get",
               url: "http://api.domain.com/user/"+o.user,
               data: "",
               dataType: "jsonp",
               success: function(data){
                    var p = data;
                    console.log(p.location);
                    $(this).html(p.location);
               }
            });

          // returns the jQuery object to allow for chainability.  
          return this;  
    }  
})(jQuery);

如果我使用上面的内容，console.log会显示一个错误，它无法在div中写入p.location，id =“box”

我如何才能获得它，以便它可以在调用插件时写入指定的div？

Answer 1

this将不会在success回调中包含您期望的上下文，因此您只需将div分配给var，以便以后可以使用它。

(function($){  
    $.fn.jQueryPlugin= function(options) {  

        var  
          defaults = {  
            user: ''
          }

            var options = $.extend(defaults, options);
            var o = options; 

            var $div = $(this);

             $.ajax({
               type: "get",
               url: "http://api.domain.com/user/"+o.user,
               data: "",
               dataType: "jsonp",
               success: function(data){
                    var p = data;
                    console.log(p.location);
                    $div.html(p.location); // now we have the original div;
               }
            });

          // returns the jQuery object to allow for chainability.  
          return this;  
    }  
})(jQuery);

另一种方法是在context来电see the context option in the jQuery docs中设置$.ajax选项。

jQuery插件获取要在AJAX Success中使用的元素ID

1 个答案: