0

简而言之，我从外部服务器收到一串 5-10 个事件，如下所示：

event: add
data: { "hostname":"name", "properties": {"info": "50"}}

event: add
data: { "hostname":"name2", "properties": {"info": "45"}}

event: add
data: { "hostname":"name3", "properties": {"info": "67"}}

等等等等。

我正在通过 EventSource JS 处理它们，如下所示：

var source = new EventSource("http://XXX.XXX.XXX.XXX:PORT/")
source.addEventListener('add', onAdd)

function onAdd(e) {
  var data = parse(e)

  var output = document.getElementById('append');
  var ele = document.createElement("div");
  var frag = document.createDocumentFragment();
  frag.appendChild(ele);
  ele.setAttribute("class", 'row sub-item');
  ele.innerHTML ="<ul>"
                +"<li>" + "<span id=name>" + data.hostname + "</span>" + "</li>"
                +"<li>" + "INFO: " + "<span id=info>" + data.properties.info + "</span>" + "</li>"
                +"</ul>"
                +"</div>"
  output.appendChild(frag);
}

此代码成功地将每个 div 和其中的无序列表添加到页面上。

我的问题是我有另一组未来事件，例如：

event: update
data: { "hostname":"name", "properties": {"info": "65"}}

event: update
data: { "hostname":"name2", "properties": {"info": "35"}}

event: update
data: { "hostname":"name3", "properties": {"info": "15"}}

ETC..

这些来自服务器并经常发送新的信息属性。我找不到使用跨度类（_ _不能使用id ( ) 因为那样它只会更新第一个，因为 id 应该只在您的页面上使用一次。<span class="info"<span id="info"

我知道必须有一个我忽略的简单解决方案。谢谢！

4

1 回答 1

0

您可以通过向每个跨度添加属性来使用数据集data-id，然后仅更新匹配项。

您还可以将您的 id 更改为 info_45 等，并获取每个跨度的 id，并使用正则表达式获取 idcleanID = idFromSpan.match(/\d+/g)[0];

于 2016-03-07T09:35:22.243 回答