使用 RSS jQuery 时多个帖子不可见

Question

我正在尝试构建 RSS 提要并且可以正常显示一个 post，我希望它显示多个 post。

最初只有 post 个标题（panel-title）可见，点击后添加了切换效果（jQuery）以显示其内容（data-content）。它确实获取多个 posts（在控制台中为 object-shown）但不可见。

我想要什么？ --> 最初显示多个 post 标题和 onClick 显示各自的内容 body.

我想我应该使用 each() 和 append()，但我不确定该怎么做。

你可以在fiddle

上查看整个代码

这里是js文件：

function blogRSS(url, container) {
var content = $('.data-content'); //console.log(content);

$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
     console.log(data.responseData.feed); //it shows object of all fetched posts

     $.each(data.responseData.feed.entries, function(key, value) {
        var thehtml = '<h4><a href="' + value.link + '" target="_blank">' + value.title + '</a></h4>';

        $('.panel-heading').html(thehtml);
        $('.data-content').html(value.content);

    });
  $('.data-title').find('h4').addClass('panel-title');
 }
 });
};

Answer 1

完成这项工作的步骤：

您需要为添加的每个项目附加包含 html。为了尽可能少地更改您的脚本，我使用包含每个项目结构的 var 来完成此操作，然后在添加每个项目之前附加它。

var itemLayout = '<div class="panel panel-default "><div class="data-title"><div class="glyphicon glyphicon-collapse-down icon expand_icon"></div><div class="panel-heading"></div><div class="bkmark_icon"></div></div><div class="data-content panel-body"></div></div>';

追加：

$("body").append(itemLayout);

然后你需要说你添加内容，这样你就不会 select 每个项目，你可以使用 .last() 来确保你只编辑你刚刚添加的项目。

$('.panel-heading').last().html(thehtml);
$('.data-content').last().html(value.content);

既然已经正确添加了项目，我们需要确保按钮在所有地方都能正常工作。由于它们是动态添加的，因此您当前的 click 处理程序将无法工作，将其更改为此将允许它访问动态元素：

$(document).on('click', '.panel-heading, .expand_icon', function() {})

在这里面，你需要确保你只 selecting 这个项目元素。

我已经对您的 JSFiddle 进行了一些更新，请看一下，它应该可以满足您的大部分需求：

Updated Fiddle

此版本将使用 HTML 文件中的结构来克隆和填充提要，它仍然是动态元素，但这会将您的 HTML 保留在 HTML 文件中：

New fiddle

使用 RSS jQuery 时多个帖子不可见

Multiple posts not visible using jQuery for RSS

javascript

rss

jquery

json