Question

我正在使用里程表为某些值制作动画https://github.hubspot.com/odometer/

我看到它指出：

您用来更新其价值的任何库，只要它们不要通过删除和重新显示里程表元素来进行更新，工作正常。

但这是我需要做的。有没有办法使它与动态创建的元素一起使用？我尝试在AJAX成功的情况下再次调用整个库函数，但是没有骰子...

页面加载时我有一些元素可以正常工作（初始值0通过JS设置）

<strong id="odometer-away" class="odometer" data-value="'. $value .'"></strong>

当滚动到视图中时，我的js使用jQuery的.text()来设置元素值。（从data属性中拉出）

var odo = $('#odometer-away');
odo.text(parseFloat(odo.data('value')));

但当我通过AJAX创建更多元素并将其加载到页面时，动画不再对这些元素起作用，并且我发现这些元素不包含任何从HTML生成的HTML元素在页面加载时具有的里程表脚本。因此很明显，没有注册。

我找不到与此相关的任何信息，而且看起来非常辛苦。这是一个小提琴，其中新创建的元素未设置动画。

Fiddle demo

Answer 1

您需要通过使用新的Odometer（）重新初始化新创建的元素。在您的小提琴演示中使用它。

/* elements already on the page will animate */
setTimeout(function(){
  var odo = $('#odometer-away');
  odo.text(parseFloat(odo.data('value')));
}, 1000);


/* create new element */
var div = document.createElement("DIV");    
div.classList.add("odometer");
div.classList.add("new-odometer");
var t = document.createTextNode(0);      
div.appendChild(t);                              
document.body.appendChild(div); 


/* try and animate newly created elements but it just updates the value... */
setTimeout(function(){
  var new_odo = document.querySelector('.new-odometer');  
   var odPhone = new Odometer({
    el: new_odo,
  });
  odPhone.update(200);
}, 3000);

Answer 2

里程表可能会在odometer上使用document.ready类的元素，但是您必须在新元素上手动调用它：

  var el = document.getElementById('new-odo');
  var new_odo = new Odometer({
    el: el
  });
  new_odo.update(999);

Demo

在动态创建的元素上运行Odometer.js

2 个答案: