Question

我的代码如下：

<h3 class="odometer-github-stars">
   <span class="odometer-label">Upload Speed: <i class="fa fa-arrow-circle-o-up"></i></span>
   <div class="odometer odometer-theme-minimal">0</div>
</h3>

要发起的脚本：

setTimeout(function(){
    $('.odometer').html('4564');
    }, 
      1000
    );

我遇到的问题是我希望添加里程表的第二和第三个实例，我认为这可能是添加另一类说法的例子：

<div class="odometer_number_two odometer-theme-minimal">0</div>

等。然后添加其他功能，例如：

setTimeout(function(){
    $('.odometer_number_two').html('1234');
    }, 
      1000
    );

但真的没有到达任何地方。

任何人，有什么建议吗？

Answer 1

odometer是默认用法的请求类，因此您必须在两个项目中使用它，您只需要以另一种方式定位元素。

使用另一个类或id来定位它..

<div class="odometer odometer_number_one odometer-theme-minimal">0</div>
<div class="odometer odometer_number_two odometer-theme-minimal">0</div>

和

setTimeout(function(){
    $('.odometer_number_one').html('4564');
    $('.odometer_number_two').html('1234');
}, 1000);

Answer 2

支持多个里程表实例的最简单方法是为每个里程表使用不同的ID。

示例：

<div id="odometer1" class="odometer odometer-theme-minimal">0</div>
<div id="odometer2" class="odometer odometer-theme-minimal">0</div>

使用以下方法更改特定里程表的值：

setTimeout(function(){
    $('#odometer1').html('1234');
    $('#odometer2').html('2345');
    }, 1000);

Answer 3

多动态里程表的另一种方式（表内可用）。在MVC（c＃）中实现

在此定义 <td>

<td class="text-center">                                                                                                                   
    <div id="@string.Concat("divOffsetCumulativeHours-",item.Asset_ID)" class="odometer odometer1">@item.OffsetCumulativeWorkingHours</div>                                    
    <input type="hidden" id="hdnOffsetCumulativeHour" name="hdnOffsetCumulativeHour" value="@item.OffsetCumulativeWorkingHours" />
    <input type="hidden" id="hdnOdometerDivIdValue" name="hdnOdometerDivIdValue" value="@string.Concat("divOffsetCumulativeHours-",item.ID)" />
    </div>                       
</td>

脚本

function InitializeOdometers()
    {
        var todaygridtable = $('#divtodaysview').find('table');
        //If there is a table exists inside the div - then find the OffsetCumulativeHour and OdometerDivIdValue hiddencontrol inside each row
        if (todaygridtable) {
            //Loop through the whole row wise "Today's View table"
            var rows = $("#tblTodaysView").dataTable().fnGetNodes();
            for (var i = 0; i < rows.length; i++) {
                var tr = $(rows[i]);
                //Get the CumulativeHour Value in each row
                var offsetCumulativeHour = $(tr).find($('input[name="hdnOffsetCumulativeHour"]')).val();
                //Find the div id for the odometer - saved in another hidden control
                var odometerDivIdHidden = $(tr).find($('input[name="hdnOdometerDivIdValue"]')).val();
                if (offsetCumulativeHour) {
                    //Find the odometer div
                    var odometerDiv = $(tr).find($('#' + odometerDivIdHidden));
                    //Find the default value assigned to odometer div
                    var defaultVal = parseFloat($(odometerDiv).text().trim()).toFixed(2);
                    //Find the Correct(New) Value to be assign to odometer div
                    var newVal = parseFloat(offsetCumulativeHour).toFixed(2);
                    if (typeof defaultVal === 'undefined' || defaultVal == null) {
                        defaultVal = 0.00;
                    }
                    //Generate Odometer Object with the Odometer div
                    var $container = $(odometerDiv);
                    if ($container && $container.get(0))
                    {
                        var odometer = new Odometer({
                            el: $container.get(0),
                            value: defaultVal,
                            format: '(ddd).dd',
                            theme: 'train-station'
                        });
                        odometer.render();
                        setTimeout(function () {
                            debugger;
                            //Assign new value to Odometer div
                            //$container.text(newVal); // value to reach
                            odometer.update(newVal);
                        }, 1000);
                    }
                }
            }
        }
    }

odometer.js的多个实例

3 个答案: