代码之家  ›  专栏  ›  技术社区  ›  Taylor A. Leach

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

  •  1
  • Taylor A. Leach  · 技术社区  · 6 年前

    我用里程表来制作一些数值动画 https://github.hubspot.com/odometer/

    我看到上面写着:

    任何你用来更新其值的库,只要它们 不要通过删除和重新发送里程表元素来更新,will 工作很好。

    但这是我需要做的。有没有办法让它与动态创建的元素一起工作?我试过在Ajax成功的情况下再次调用整个库函数,但是没有把握…

    我在页面加载中有正确工作的元素(0的初始值是通过JS设置的)

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

    我的JS使用jquery .text() 在滚动到视图中时设置元素值。(从数据属性中提取)

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

    但是 当我通过Ajax创建更多的元素并将它们加载到页面时,动画将不再对这些元素起作用,我看到元素不包含元素在页面加载时从里程表脚本生成的任何HTML…很明显有些东西没有注册。

    我找不到任何关于这个的信息,我看起来很努力。这里是一个新创建的元素不动画的小提琴。

    Fiddle demo

    2 回复  |  直到 6 年前
        1
  •  0
  •   isherwood    6 年前

    里程表可能会查找 odometer 课上 document.ready ,但您必须手动调用新元素:

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

    Demo

        2
  •  2
  •   karthick    6 年前

    您需要使用new 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);