Question

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

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

在这种情况下，基本上将Tumblr列表应该放入DIV，并使用类'new'。到目前为止，这是我的代码;问题似乎是如何让它从原始调用中获取类/ id（在HTML中）并在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 );

任何可以借出的帮助都会很精彩。谢谢

Answer 1

不确定你是否还需要帮助，但我上周制作了一个符合你需求的小插件。随意使用它，我的博客http://jimukjxb.tumblr.com/上的信息。它虽然使用了tumblr API的V2。代码类似于您已经编写的代码，但我正在使用Ajax调用。希望它有用。

Answer 2

您是否尝试过.appendTo(this)？

Answer 3

根据规范：

“没有必要做$（this）因为 “这个”已经是一个jquery对象“

因此，请尝试将最后一位保存到var并通过this.append(theVar);

附加

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

Answer 4

Seamus James如何说，你应该使用它来代替$（this）但是，在getJson函数中你不能直接访问它...所以保存在var中这样...就像： var $ container = this;

在开头然后你可以在函数内部使用$ container ...我传递了我的代码，这是有用的：

(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 );

制作一个jQuery插件，将Tumblr提供给网站

4 个答案: