Блог

Я ненавижу продолжать задавать простые вопросы и выглядеть полным идиотом, но пока я не смогу сесть и освоить Javascript и jQuery, я должен полагаться на вас, добрые и щедрые люди здесь.

Я вызываю сообщения Tumblr с тегом «_featured» и показываю их на боковой панели вместе с изображением, если это текстовое сообщение с включенным изображением. Единственная проблема заключается в том, что само изображение не связано. Ничего особенного, но немного неинтуитивно. Как бы мне это исправить?

И код:

 /*
    TUMBLR FEATURED POSTS SCRIPT
    Automatically gets all posts tagged with "featured" and lists them
    REQUIRES JQUERY!
    --------------------------------------
    Created by james <at> bandit.co.nz
    http://blog.bandit.co.nz

    Some code borrowed from Jacob DeHart's AJAX Search:
    http://blog.bandit.co.nz/post/80415548/tumblr-ajax-inline-search
*/
Featured = {
    'apiNum' : 50, // how many posts to read
    'listId' : '_featured', // the id of the ul to write to
    'tagName' : '_featured', // the name of the tag we're searching for
    'linkAppend' : '', // html to append to the end of each linked post

    'postDB' : [],
    'listPos' : 0,
    'doList' : function (where) {
        var li; var ul = $('#' where);
        var titles = {"link":"link-text", "photo":"photo-caption", "quote":"quote-text", "regular":"regular-title", "video":"video-caption"}

        // cycle through post database
        pcount = Featured.postDB.length;
        for(i=Featured.listPos;i<pcount;i  ) {
            p = Featured.postDB[i];
            if(p[titles[p.type]] != '') titlestr = p[titles[p.type]].replace(/</?[^>] >/gi, '');
            else titlestr = p['url'];

            li = document.createElement('li');
            $(li).append($(p['regular-body']).find('img')[0])
            .append('<div class="featurelink"><a class="' p.type '" href="' p["url-with-slug"] '">' titlestr Featured.linkAppend '</a></div>');
            ul.append(li);

            Featured.listPos = pcount;
        }
    },

    'getData' : function() {
        $.get('/api/read/json?num=' Featured.apiNum 'amp;tagged=' Featured.tagName,
            function(data) {
                eval(data);
                for(i=0;i<tumblr_api_read.posts.length;i  ) {
                    Featured.postDB.push(tumblr_api_read.posts[i]);
                    Featured.doList(Featured.listId);
                }
            }
        );
    }
};

$(document).ready(function(){
    Featured.getData();
});
  

Как всегда, любая помощь получает мою вечную благодарность.

Ваша проблема в том, что вы добавляете изображение к <li> , когда хотите, чтобы оно было внутри <a> того, что будет внутри этого <li> . Изменение вашего конструктора элементов списка с этого:

 li = document.createElement('li');
$(li).append($(p['regular-body']).find('img')[0])
     .append('<div class="featurelink"><a class="' p.type '" href="' p["url-with-slug"] '">' titlestr Featured.linkAppend '</a></div>');
ul.append(li);
  

к чему-то вроде этого:

 $li = $('<li>');
$li.append('<div class="featurelink"><a class="'   p.type   '" href="'   p["url-with-slug"]   '">'   titlestr   Featured.linkAppend   '</a></div>');
$li.find('a').prepend($(p['regular-body']).find('img')[0]); // The important part
ul.append($li);
  

должно сработать. Изменения создают <a> внутри <li> , а затем помещают изображение спереди (т. Е. предваряют) <a> . Вероятно, вам придется немного скорректировать CSS, чтобы получить желаемый макет, возможно, что-то вроде:

 a     { display: block; }
a img { display: block; }
  

с соответствующими селекторами CSS для их локализации.