使用jQuery for RSS看不到多个帖子

Multiple posts not visible using jQuery for RSS

本文关键字：看不到 jQuery for RSS 使用      更新时间：2023-09-26

我正在尝试构建RSS提要，并且可以很好地显示一个帖子，我希望它显示多个帖子。

最初，只有帖子标题（面板标题）是可见的，点击后添加了切换效果（jQuery）来显示其内容（数据内容）。它确实获取了多个帖子（如控制台中显示的对象），但不可见。

我想要什么？-->以初始显示多个帖子标题，然后单击显示相应的内容主体。

我想我应该使用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');
 }
 });
};

实现此功能的步骤：

您需要为添加的每个项目附加包含的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);

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

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

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

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

在这里面，你需要确保你只选择了这些项目元素。

我已经对你的JSFiddle进行了一些更新，看看它应该能做你想要的大部分事情：

更新的Fiddle

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

新小提琴

相关文章：