javascript - 重建 twitter 克隆中的 JQuery/HTML 关系

标签 javascript jquery html css twitter

我正在构建一个 Twitter 克隆。一段时间以来,我一直在摆弄如何让东西显示出来,但到目前为止,还没有成功。

我看到了

 var $body = $('body');
 $body.html('');

清除所有可能在脚本加载前写入的 html 标签(对吗?)

在 whats here 的情况下,当我尝试在脚本本身中添加 html 元素时,为什么它仍然不可见?例如,为什么标题不是来自

$upTop= $('<h1>Twittler</h1>').appendTo($body) 

当我将它附加到正文时显示?我环顾四周,虽然也有类似的问题,但我没有找到明确/明确的答案来帮助我完成这项工作。我想一旦弄清楚“div”和 $body 在代码中的操作方式之间的关系,我就可以开始了。请参阅下面的代码源和评论。

我们已经感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
  <title>Twittler</title>
  <script src="jquery.js"></script>
  <script src="data_generator.js"></script>
  <link rel ="stylesheet" href="Twittler.css">
</head>
<body>
<script>
  $(document).ready(function() { 
    var $upTop = $('<h1>Twittler</h1>').appendTo($body);
    var $body = $('body');
    $body.html('');

    var index = streams.home.length - 1;

    while(index >= 0) {
      var tweet = streams.home[index];
      var $tweet = $('<div></div>');
      $tweet.text('@' + tweet.user + ': ' + tweet.message);
      $tweet.prependTo($body);
      index -= 1;
    }
  });
</script>
</body>
</html>

<!--
Comments:
That file is called `data_generator.js`.  You don't need to understand the code that's in it, but here's what it does:

* Creates two global variables, `users` and `streams`.
  * `users` is an array of strings: all the usernames that you're following.
  * `streams` is an object with two properties, `users` and `home`.
    * `streams.home` is an array of all tweets from all the users you're following.
    * `streams.users` is an object with properties for each user.  `streams.users.albreyb` has all of `albreyb`'s tweets.
* Kicks off a periodic process that puts more data in `streams`.

You'll mostly be working in the javascript block of `index.html`. Note: The generated tweets will be displayed in reverse chronological order.


Basic Requirements:

- [ ] Show the user new tweets somehow.  (You can show them automatically as they're created, or create a button that displays new tweets.)
- [ ] Display the timestamps of when the tweets were created.
- [ ] Design your interface so that you want to look at and use the product you're making.
- [ ] Allow the user to click on a username to see that user's timeline.




We want to be able to have the new tweets show up (at the top of the page) when we click a button.
We want the old tweets to be maintained (in a different container/div?)
We want to be able to click the button again and shift those tweets down in to the container/div.. and so on.

-->

最佳答案

我对你的问题到底是什么感到有点困惑,但正如你所说

var $body = $('body');
$body.html('');`

清除 body 和

var $upTop = $('<h1>Twittler</h1>').appendTo($body);

添加到正文中,但这些东西以相反的顺序运行。首先,您要添加到主体,然后清除它,所以最后它是空的。

关于javascript - 重建 twitter 克隆中的 JQuery/HTML 关系,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34912573/

相关文章:

javascript - 这段 JavaScript 代码中使用了什么技术?

javascript - 实现 AJAX GET 和自定义事件的 javascript 对象的语法

javascript - 当我只能通过引用复制另一个方法时,为什么还要使用 bind() 呢?

javascript - Javascript 上下滚动动画

javascript 变量范围 - 我该如何解决这个问题?

javascript - 将代码添加到 Wordpress 站点页面

html - Canvas 背景和 HTML <body> 元素

javascript - ExtJS 3.0 中更通用的面板加载掩码

jquery - 如何添加适用于移动触摸屏的垂直 slider ?

jquery - 大卡特尔 - 幻灯片问题