Question

简而言之，我有一串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"}}

等。

这些来自服务器并经常发送新的信息属性。我无法使用span类（<span class="info"）找到更新所有唯一信息属性的方法，因为如果我按 类排序 它会使用相同的数字（name1 45 name2 45 name3 45）更新页面上的每个信息属性，并且我无法使用 id （ <span id="info"）因为它只会更新第一个，因为id应该只在页面上使用一次。

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

Answer 1

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

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

如何通过JS使用唯一的子数据按类更新多个元素？

1 个答案: