Создание плагина jQuery для подачи Tumblr на сайт

Question

У меня есть некоторый опыт работы с PHP и немного с JS, но я далеко не опытен.Я пытаюсь создать плагин jQuery для своего сайта, который я могу вызвать в своем HTML-коде примерно так:

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

, который в основном поместил бы список Tumblr, который код должен был сделать, в DIV с классом 'новый в этом случае.Вот мой код до сих пор;Кажется, проблема в том, как заставить его выбрать class / 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/.Он использует V2 API Tumblr, хотя.Код похож на то, что вы уже написали, но я использую Ajax-вызовы.Надеюсь, что это полезно.

Answer 2

Согласно спецификации:

"Нет необходимости делать $ (это), потому что "this" уже является объектом jquery "

Так что попробуйте сохранить последний бит в var и добавить его через this.append(theVar);

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

Answer 3

Как сказал Симус Джеймс, вы должны использовать это вместо $ (this), но, находясь внутри функции getJson, вы не можете получить к ней доступ напрямую ... так что сохраните в var this ... например: 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 );

Answer 4

Вы пробовали .appendTo(this)?