如何在数据列表中绑定里程表

How to Bind Odometer in Datalist

本文关键字：绑定 里程表 列表 数据      更新时间：2023-09-26

我从http://uvumitools.com/odometer.html但只有数据列表中的第一个元素获得Odometer，其他元素不显示里程表。这是代码

<script type="text/javascript" src="js/UvumiOdometer-compressed.js"> </script>
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-odometer.css"
<script type="text/javascript">
  var odo2 = new UvumiOdometer('odometer2', { digits: 3 });
</script>`

<asp:DataList ID="dlEquipment" runat="server" DataKeyField="Device_Id" RepeatDirection="Horizontal" RepeatColumns="5" Width="100 > <ItemTemplate> <div id="odometer2<%# Eval("count")%> </div></ItemTemplate>

因为有多个元素具有相同的ID，所以它只适用于第一个元素。。

更改Item模板以包含脚本-该脚本初始化新的里程表-这样它将基于任何键列为odemterdiv填充不同的id

试试这个

<ItemTemplate>
    <div id='odometer<%# Eval("Device_Id") %>'>
        <%# Eval("count")%>
    </div>
    <script type="text/javascript">
        new UvumiOdometer('odometer<%# Eval("Device_Id")%>', { digits: 3 });
    </script>
</ItemTemplate>
  • 我假设"Device_Id"是一个唯一的列

这是因为您在列表元素中使用静态id odometer2，文档中的id应该是唯一的，否则文档中的id.getElementById（id）将始终返回具有给定id的第一个元素。

如果使用jQuery，可以向div 添加一个class属性

<ItemTemplate> <div class="odometer2"> </div></ItemTemplate>
then
<script type="text/javascript">
jQuery(function($){
    $('.odometer2').each(function(){
        new UvumiOdometer(this, { digits: 3 });
    })
})
</script>
相关文章：