Question

我从http://uvumitools.com/odometer.html下载了里程表示例但只有Datalist中的第一个元素才能获得里程表，其他元素则没有显示 Ododmeter。这是代码

<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>

Answer 1

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

更改项目模板以包含脚本 - 初始化新的里程表 - 因此它将根据任何键列填充odemter div的不同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”是一个独特的列

Answer 2

这是因为你在list元素中使用静态id odometer2，文档中的ID应该是唯一的，否则document.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>

如何在Datalist中绑定里程表

2 个答案: