带AJAX的jQuery：多输出

Question

我创建了一个抓取JSON提要（本例中为YouTube）的jQuery插件。然后它将结果显示在DIV中 - 一切正常，直到：我想在两个或多个容器中显示结果（使用不同设置：即更多视频，其他频道） - 我如何实现这一点？

btw ...这是我的问题的正确标题？我远远不是一个jQuery/JS专家:)

这里是我到目前为止的代码 - 我把它缩短到基本动作和一个基本的输出：

(function($){ 
    // Default settings 
    var settings = { 
     author:  'ARD', 
     results: 3 
    }; 

    // Append to Container 
    var append_to_container; 

    // The Methods 
    var methods = { 
     // Initate 
     init: function(options){ 
      append_to_container = $(this); 

      $.extend(settings, options); 
      methods.grabFeed(); 
     }, 

     // Grab feed 
     grabFeed: function(){ 
      $.ajax({ 
       url: 'http://gdata.youtube.com/feeds/api/videos', 
       data: { 
        author: settings.author, 
        v: '2', 
        alt: 'jsonc', 
        'max-results': settings.results 
       }, 
       dataType: 'jsonp', 
       success: function(data){ 
        methods.gotResults(data); 
       } 
      }); 
     }, 

     // Placeholder for results 
     gotResults: function(data){ 
      console.log(data); 
      $("<h1>Success!</h1>").appendTo(append_to_container); 
     } 
    }; 


    $.fn.youtubeVideos = function(method){ 
     // Method calling logic 
     if (methods[method]) { 
      return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || ! method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.youtubeVideos'); 
     } 
    } 

})(jQuery); 

现在，当我打电话$('#main').youtubeVideos();它按预期工作。

但现在我想在多个DOM元素中显示结果。所以当我打电话举例：

$('#main').youtubeVideos(); 
$('#same_videos').youtubeVideos(); 

它显示成功！消息在第二次调用中使用的容器中两次。

我试着用stackoveflow和web的几个答案 - 但我找不到一种方法来使用我的函数不止一次。 如何在多个容器上多次使用我的插件？

---

编辑/解决方案

这里是Codemonkey尖端后，我的解决方案：

(function($){ 

    $.fn.youtubeVideos = function(method){ 

     // Default settings 
     var settings = { 
      author:  'ARD', 
      results: 3 
     }; 

     // Append to Container 
     var append_to_container; 

     // The Methods 
     var methods = { 
      // Initate 
      init: function(options){ 
       append_to_container = $(this); 

       $.extend(settings, options); 
       methods.grabFeed(); 
      }, 

      // Grab feed 
      grabFeed: function(){ 
       $.ajax({ 
        url: 'http://gdata.youtube.com/feeds/api/videos', 
        data: { 
         author: settings.author, 
         v: '2', 
         alt: 'jsonc', 
         'max-results': settings.results 
        }, 
        dataType: 'jsonp', 
        success: function(data){ 
         methods.gotResults(data); 
        } 
       }); 
      }, 

      // Placeholder for results 
      gotResults: function(data){ 
       console.log(data); 
       $("<h1>Success!</h1>").appendTo(append_to_container); 
      } 
     }; 


     // Method calling logic 
     if (methods[method]) { 
      return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || ! method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.youtubeVideos'); 
     } 
    } 

})(jQuery); 

$('#main').youtubeVideos(); 
$('#same_videos').youtubeVideos(); 

Answer 1

通过把所有的功能分为：

$.fn.youtubeVideos = function(method){ ... 

这就是它。每次运行插件函数时，该函数的上下文都是唯一的。如果您需要通过多次调用插件函数来将数据保存在jQuery对象中，请使用jQuery.data。除此之外，你很好去。

你应该看看一些jQuery插件的例子（Pick and choose），看看它们是如何工作的。