帶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），看看它們是如何工作的。