如何显示/隐藏生成的无序列表

How to show/hide an unordered list that is generated

本文关键字：无序 列表 隐藏 何显示 显示      更新时间：2023-09-26

我使用此代码生成来自给定用户的最后5条tweet。

我想做的是每次显示一条tweet。

我已经修改了脚本，以便生成的<ul>具有id。您可以看到我在脚本的第6行所做的更改。

下面是我使用的脚本:

$(document).ready(function () {
var tweets = $('#tweetlist li').hide();
    i = 0;
(function cycle() { 
    tweets.eq(i).fadeIn(600)
              .delay(4000)
              .fadeOut(600, cycle);
    i = ++i % tweets.length;
})();
});

由于某些原因，它就是不起作用。我在两个脚本之前都调用了jquery，但列表仍然显示所有项。

这是我一直在使用的jsfiddle:http://jsfiddle.net/wulfmann/qst8atkk/1/

奇怪的是，如果我自己构建列表，它会工作。

我有一种感觉，我错过了一些基本的东西。不可否认，我没有逐行浏览twitter脚本代码，所以我可能在那里遗漏了一些东西。

我现在正在学习jquery和javascript，所以我只是想确保我没有错过一些基本的。

编辑:在附件的jsfiddle中，我已经取消了js，以便您可以看到。

你的fadeIn/fadeOut循环是好的。但是，在您的示例中，您在文档加载之后，在异步操作(获取tweet)结束之前运行它，这意味着tweet列表为空，然后呈现完整列表。

要防止这种情况，请使用配置中的customCallback选项。获取项目后，回调将呈现它们，隐藏它们，然后执行fadeIn/fadeOut循环(demo):

var configProfile = {
  "profile": {"screenName": 'twitter'},
  "maxTweets": 5,
  "enableLinks": true, 
  "showUser": true,
  "showTime": true,
  "showImages": false,
  "customCallback": handleTweets,
  "lang": 'en'
};
twitterFetcher.fetch(configProfile);
function handleTweets(tweets) {
    var x = tweets.length;
    var n = 0;
    var element = document.getElementById('tweets');
    var html = '<ul>';
    while(n < x) {
      html += '<li>' + tweets[n] + '</li>';
      n++;
    }
    html += '</ul>';
    element.innerHTML = html;
    var tweets = $(element).find('li').hide();
    var i = 0;
    (function cycle() { 
      tweets.eq(i).fadeIn(600)
        .delay(4000)
        .fadeOut(600, cycle);
      i = ++i % tweets.length;
    })();
}
相关文章：