簡體   English   中英

如何顯示/隱藏生成的無序列表

[英]How to show/hide an unordered list that is generated

我正在使用代碼從給定用戶生成最后5條推文。

我想做的是一次顯示每條推文。

我已經修改了腳本,以便生成的<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循環很好。 但是,在您的示例中,您是在文檔加載之后,異步操作(獲取推文)結束之前運行它的,這意味着推文列表為空,然后呈現完整列表。

為了防止這種情況, customCallback在配置中使用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;

    })();
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM