jquery - jQuery插件获取元素ID以在AJAX成功中使用

Question

我正在构建一个 jQuery 插件。

调用插件

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

查询插件

(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 会显示一个错误，它无法在 id="box" 的 div 中写入 p.location

我怎样才能得到它，以便它可以写入调用插件时指定的任何 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选项，请参阅 jQuery 文档中的 context 选项。$.ajax