javascript - 用图像和其他东西替换动态内容

Question

我正在努力研究如何以最好的方式设计这种代码:

<td><div data-source="lightstreamer" data-field="yellow-cards">-</div></td>

数据源节点将动态地处理内容(即 1、2..)，但我必须显示图像(如果节点内容为 1 则为黄牌，如果节点内容为 2 则为红牌) .我无法修改标记，因为它将由第三方提供。

如果您有任何关于如何以干净的方式实现该结果的提示，我们将不胜感激，因为我现在不确定如何去做。

非常感谢!

张学友

Answer 1

如果您不必支持旧版浏览器(需要 css 选择器才能工作)，您可以通过利用数据更新选项改进您的解决方案:该选项告诉 Lightstreamer 客户端库将更新值放在某处else 而不是将其作为 html 节点的内容。在这种情况下，我们可以告诉库填充名为“data-card”的自定义属性。

生成的 html 将如下所示:

<div data-source="lightstreamer" data-field="yellowCards" data-update="data-card" data-card="0">-</div>

现在我们使用简单的 CSS 告诉浏览器根据此类数据卡属性的值为元素着色:

div[data-card="0"] {background: white;display: none;}
div[data-card="1"] {background: yellow;}
div[data-card="2"] {background: red;}

这样您就不必为网格更新编写任何处理程序。

HTH