Question

我对jQuery＆amp;阿贾克斯和我希望得到社区的一些支持/帮助。基本上我正在尝试为一些预先确定的新闻源创建一个'facebook-esqu'新闻板。

我有一个列表元素，可以通过Java（确切地说是JSF2）动态创建页面加载列表，该列表是从我的数据库构建的。我想要的是ajax函数（简单的ajax poll就足够了）来检查更改，以及更改适用于为新列表元素执行简单的淡出/淡入功能。这个更新列表元素是否被列在列表的底部（如滚动动画），或者它仍然保留在原位，我不介意我只是对如何实现这一点感到困惑。

以下是我的想法的粗略表示：

onPage load:
List Item 1
List Item 2
List Item 3 

OnAjax Update:
List Item 1
List Item 2 <--- Update Identified so fade element out
List Item 3

OnAjax After Update:
List Item 1
List Item 2a <--- Fade new element in
List Item 3

希望有人可以提供帮助。

干杯

Answer 1

问题的问题在于您要求我们为您编写代码。但是，为了给你一个正确的方向：

假设您在调用JSF2页面进行更新时，它只返回更新的项目，如下所示：

{{id: 2, status: "removed"},
 {id: 2a, status: "added", text: "This is a new element"},
 {id: 4, status: "added", text: "This element 4"}}

然后，您将拥有一个循环JSON结果的函数，查看状态字段。

如果表示形式如下：

<div id="listelements">
   <div id="1">List Item 1</div>
   <div id="2">List item 2</div>
   <div id="3">List Item 3</div>
</div>

然后你的代码看起来像这样：

for (each element in JSON string as element) {
  if (element.status == 'removed') { 
    $('#' + element.id).fadeOut().remove();
  } else if (element.status == 'added') {
    $("#listelements").append('<div id="' + element.id 
      + '" style="display:none;">' 
      + element.text + '</div>');
    $("#" + element.id).fadeIn();
  }
}

请注意，我没有调试此代码，所以我不确定它是否会100％正常工作。这是一个让你开始的可能方向的推动。你会发现，在你开始研究之后，如果你提出更具体的问题，你会得到更好的答案。

jQuery直播新闻自动收报机...

1 个答案: