Question

我试图在此示例show more button中添加一个显示更多按钮或div，就像我在这里制作的jquery rs Jquery rss feed一样。问题是我多次尝试使用div包装器包装rss div并强制它仅显示几行，但它不起作用...

所以我想要的是隐藏所有的RSS提要，除了前三名。然后，只要我想显示更多Feed线程，我只需点击显示更多按钮...

这是带有javascript的显示更多按钮：

Jquery show button

for (var i = 0; i < 30; i++) {
    $("ul").append("<li>" + i + "</li>");
}

var $li = $("li"),
    chunk = 5;

console.log(chunk, $li);

$li.slice(chunk).hide();

$("button").click(function() {
    $li.filter(":hidden").slice(0, chunk).show();
});

html show button

<ul></ul>
<button>Show more</button>

jquery rss：

$(document).ready(function () {
  $('#test').rssfeed('http://feeds.reuters.com/news/artsculture/', {
    limit:100
  });
});

rss html：

<div id="test"></div>

任何想法我必须做什么才能只显示前3个或5个Feed并隐藏其余的。点击显示更多按钮 ... ??

后，显示每个3或5个Feed

由于

Answer 1

zRSSfeed.js中有一个叫callback选项的东西。这表示Feed在DOM中的点，有点像完成状态。有关详细信息，请参阅example和stackoverflow question。 请注意，您必须使用the latest version of zRSSfeed.js (1.2.0)才能生效。。因此，使用此回调选项，您可以通过JavaScript控制您的Feed。所以它看起来像这样：

$('#test').rssfeed(feedURL, options , function (e) {
    var $li = $("#test").find(".rssRow"),
        chunk = 3;

    //hide rows > 3
    $li.slice(chunk).hide()

   //insert button after ul
   $("ul").after("<button>Show more</button>");

   //event handler for button
   $("button").click(function () {
      //get the elements hidden            
      var el = $li.filter(":hidden");
      //to hide show more for last click (there aren't any more elements
      if (el.length <= chunk) {
        $(this).hide();
      }
      //show next 3 rows
      el.slice(0, chunk).show();
  });

}）;

更新了小提琴：http://jsfiddle.net/HLCxV/7/

jquery rss显示更多功能

1 个答案: