制作一个 jQuery 插件来将 Tumblr 提供给网站答案

【问题标题】：Making a jQuery plugin to feed Tumblr to site制作一个 jQuery 插件来将 Tumblr 提供给网站
【发布时间】：2012-02-07 19:09:20
【问题描述】：

我有一些 PHP 方面的经验和一点 JS 方面的经验，但我还远远没有精通任何东西。我正在尝试为我的网站制作一个 jQuery 插件，我可以通过以下方式在我的 HTML 中调用它：

$('.new').tumble({username: "tylor", count: 9});

在这种情况下，这基本上会将代码应该制作的 Tumblr 列表放入带有“new”类的 DIV 中。到目前为止，这是我的代码；问题似乎是如何让它从原始调用（在 HTML 中）中获取类/ID 并在 jQuery 中使用它。

这是目前为止的代码：

(function($) {

  $.fn.tumble = function(options){
    var settings = $.extend({
      username: null,                           // [string or array] required to get url for tumblr account
      count: 3,                                 // [integer]  how many posts to display?
    }, options);

    //url construction
    var url = "http://" + settings.username + ".tumblr.com";
    var jsonurl = url + "/api/read/json?num=" + settings.count + "&callback=?";

    $.getJSON(jsonurl, function(data) {
      var items = [];

      $.each(data.posts, function(id, url) { // Goes over each post in the JSON document retrieved from data URL
        var url = this.url; // Just assigns a variable to the url to avoid constantly writing "this.whatever" 
        var photourl = this['photo-url-250']; // photo-url-xxx needs to be called this way due to integers in the name
        items.push('<li><a href="' + url + '">' + photourl + '</a></li>');
      });

      $('<ul/>', { // Creates an empty list
        html: items.join('') // Takes the values in the item array and puts 'em together
      }).appendTo('.new'); // I don't want this to have the class set in the jQuery itself
    }); //end json
  };

})( jQuery );

您可以提供的任何帮助都会很棒。谢谢

【问题讨论】：

标签： jquery json tumblr

【解决方案1】：

不确定您是否还需要这方面的帮助，但我上周构建了一个小插件来满足您的需求。随意使用它，信息在我的博客http://jimukjxb.tumblr.com/ 上。不过它使用了 tumblr API 的 V2。该代码类似于您已经编写的代码，但我使用的是 Ajax 调用。希望它有用。

【讨论】：

【解决方案2】：

根据规范：

“没有必要这样做 $(this) 因为 "this" 已经是一个 jquery 对象"

所以尝试将最后一位保存到 var 并通过 this.append(theVar); 附加它

http://docs.jquery.com/Plugins/Authoring

【讨论】：

我对 jQuery 和 JS 编程很陌生。你能把它扔到它应该去的代码中吗？那会很有帮助
试试这个：var theModule = $('<ul/>', { html: items.join('') }).html();this.append(theModule);
Seamus，我试过你的代码，但它似乎也不起作用。我不太确定为什么这个脚本不起作用。

【解决方案3】：

Seamus James 怎么说，你应该使用 this 而不是 $(this) 但是，在 getJson 函数中你不能直接访问它......所以保存在一个 var this ......像： var $container = 这个;

在开始时，您可以在函数中使用 $container 作为 this...我传递了我的代码，这是有效的：

(function( $ ){

    $.fn.tumble = function(options){
    var settings = $.extend({
      username: null,                           // [string or array] required to get url for
      tumblr account
      count: 3,                                 // [integer]  how many posts to display?
    }, options);

    var $container = this;
    //url construction
    var url = "http://" + settings.username + ".tumblr.com";
    var jsonurl = url + "/api/read/json?num=" + settings.count + "&callback=?";

    $.getJSON(jsonurl, function(data) {
      var items = [];

      $.each(data.posts, function(id, url) { // Goes over each post in the JSON document retrieved from data URL
      var url = this.url; // Just assigns a variable to the url to avoid constantly writing "this.whatever" 
      var photourl = this['photo-url-250']; // photo-url-xxx needs to be called this way due to integers in the name
      items.push('<li><a href="' + url + '">' + photourl + '</a></li>');
    });

    var htmlString = "<ul>"+items.join(' ')+"</ul>";
    $container.html(htmlString);
    //$('<ul/>', { // Creates an empty list
    // html: items.join('') // Takes the values in the item array and puts 'em together
    //}).appendTo('.new'); // I don't want this to have the class set in the jQuery itself
    }); //end json
  };
})( jQuery );

【讨论】：

【解决方案4】：

你试过.appendTo(this)吗？

【讨论】：