Comment lier l'odomètre dans Datalist

Question

J'ai téléchargé l'odomètre échantillon de http://uvumitools.com/odometer.html mais seulement le premier élément dans le Datalist obtenant l'odomètre, d'autres ne montrant pas l'ododmeter . Voici le code

<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

Parce que vous avez plus d'un élément avec la même ID, il a travaillé seulement pour premier ..

Changer de template d'objet pour inclure le script -Que Initialise nouveau compteur kilométrique - il renseignera différent id pour odemter div basé sur une colonne de clé

essayer

<ItemTemplate> 
    <div id='odometer<%# Eval("Device_Id") %>'> 
     <%# Eval("count")%> 
    </div> 

    <script type="text/javascript"> 
     new UvumiOdometer('odometer<%# Eval("Device_Id")%>', { digits: 3 }); 
    </script> 

</ItemTemplate> 

• Je suppose que « device_ID » est une colonne unique,

Answer 2

est parce que vous utilisez un odometer2 identifiant statique dans un élément de la liste, ID dans un document doit être unique autre document. getElementById (id) retournera toujours le premier élément avec l'identifiant donné.

si vous utilisez jQuery vous pouvez ajouter un attribut de classe à la div

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