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

Replace dynamic content with images and other stuff

本文关键字：动态 替换 其他 图像      更新时间：2023-09-26

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

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

数据源节点将动态地与内容（即1，2..）进行交互，但我必须显示图像（如果节点内容为1，则显示黄牌；如果节点内容是2，则显示红牌）。我不能修改标记，因为它将由第三部分提供。

如果你有任何关于如何以干净的方式实现这一结果的建议，我们将不胜感激，因为我现在不知道该怎么做。

非常感谢！

Teo

如果您不必支持较旧的浏览器（需要css选择器才能工作），您可以通过使用dataupdate选项来改进您的解决方案：该选项告诉Lightstreamer客户端库将更新值放在其他地方，而不是将其作为html节点的内容。在这种情况下，我们可以告诉库填充一个名为"数据卡"的自定义属性。

生成的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

您可以使用CSS选择器来针对"黄牌"属性。。如果您不想显示，文本缩进将通过偏移来隐藏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并根据值应用一个类。第一种方法是最好的，因为第二种方法将在页面加载时明显改变显示。

好的，我找到的解决方案严格基于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}
相关文章：