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

Posted 2023-03-31

【中文标题】用图像和其他东西替换动态内容

【英文标题】：Replace dynamic content with images and other stuff

【发布时间】：2013-12-02 19:02:58

【问题描述】：

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

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

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

如果您对如何以干净的方式实现该结果有任何提示，我们将不胜感激，因为我现在不知道该怎么做。

非常感谢！

张

【参考方案1】：

如果您不必支持较旧的浏览器（此功能需要 css 选择器），您可以通过利用 data-update 选项来改进您的解决方案：该选项告诉 Lightstreamer 客户端库将更新值放在某处否则，而不是将其作为 html 节点的内容。在这种情况下，我们可以告诉库填充一个名为“data-card”的自定义属性。

生成的 html 将如下所示：

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

现在我们使用简单的 CSS 告诉浏览器根据此类 data-card 属性的值对元素进行着色：

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

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

HTH

【参考方案2】：

您可以使用 CSS 选择器来定位“黄色卡片”属性。 如果你不想显示它，text-indent 将通过偏移来隐藏 innerHTML。

例如：

div[data-field='yellow-cards']  background:url(<yellow card image>); text-indent:-5000px; 

如果您不能依赖数据字段的值，则必须使用 javascript 选择所有 div 节点并通过它们检查 innerHTML。

var divarray = document.getElementById(<table id>).getElementsByTagName("DIV")
for (loop=0;loop<divarray.length;loop++) 
    switch(divarray[loop].innerHTML)
    case "-": divarray[loop].className="novalue";
              break;
    case "1": divarray[loop].className="yellowcard";
              break;
    case "2": divarray[loop].className="redcard";
              break;
    

然后遍历检查 innerHTML 并根据值应用一个类。第一种方法最好，因为第二种方法会明显改变页面加载时的显示。

【讨论】：

好吧，不幸的是，我不能只依赖数据字段值，而是依赖文本节点值......而且它也必须是动态的......所以如果值是“-”我不显示任何内容，如果值为“1”，则显示黄牌，如果值为“2”，则显示红色...而不重新加载页面。

你不能使用 CSS，它必须是 Javascript 解决方案。我已经编辑了它。您必须仔细检查 getElementsByTagName 的结果，因为它会在您的表中找到所有 DIV 节点。您显然需要为 3 种不同的可能状态设置 CSS 样式。

【参考方案3】：

好的，我找到的解决方案完全基于 LightStreamer。 给定一个 DynaGrid：

// Create Home Players Grid
    var homePlayersGrid = new DynaGrid("homePlayersGrid",true);
    var fieldList = ["key", "command", "jersey", "lastName", "sequence","substituted","yellowCards","redCards","autoGoals","goals"]; 
    var homePlayersSubscription = new Subscription("COMMAND","homePlayers",fieldList);
    homePlayersSubscription.addListener(homePlayersGrid);
    homePlayersGrid.setSort("sequence",false,true);
    client.subscribe(homePlayersSubscription);

链接到 HTML 表格：

<tr id="homePlayersGrid" data-source="lightstreamer">
        <td><div data-source="lightstreamer" data-field="sequence">-</div></td>
        <td><div data-source="lightstreamer" data-field="jersey">-</div></td>
        <td><div data-source="lightstreamer" data-field="lastName">-</div></td>
        <td><div data-source="lightstreamer" data-field="substituted">-</div></td>
        <td><div data-source="lightstreamer" data-field="yellowCards">-</div></td>
        <td><div data-source="lightstreamer" data-field="redCards">-</div></td>
        <td><div data-source="lightstreamer" data-field="autoGoals">-</div></td>
        <td><div data-source="lightstreamer" data-field="goals">-</div></td>
    </tr>

我添加了一个监听器来检测内容的任何更新：

homePlayersGrid.addListener(
      onVisualUpdate: function(key,info,domNode) 
        if (info == null) return;
        formatYellowCards(domNode,info);
      
    );

formatYellowCards() 是一个函数，它为更改的数据字段设置正确的类：

function formatYellowCards(domNode, info)  //onChangingValues
       if (info == null) return;
       info.setCellStyle("yellowCards","transition","yellowCards-"+info.getCellValue("yellowCards"));
    

最后，CSS 很简单：

.transition background: green;text-indent: -5000px
.yellowCards-0 background: white;display: none;text-indent: -5000px
.yellowCards-1 background: yellow;text-indent: -5000px
.yellowCards-1 background: red;text-indent: -5000px