Запустите Odometer.js на динамически создаваемых элементах - PullRequest
Новая
       43

Запустите Odometer.js на динамически создаваемых элементах

0 голосов
/ 19 октября 2018

Я использую одометр для анимации некоторых значений https://github.hubspot.com/odometer/

Я вижу, что в нем говорится:

Любые библиотеки, которые вы используете для обновления своих значений, при условии, что они нене обновляй, стирая и перерисовывая элемент одометра, будет работать просто отлично.

Но это то, что мне нужно сделать.Есть ли способ заставить это работать с динамически созданными элементами?Я попытался вызвать всю библиотечную функцию снова при моем успехе 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

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Вам необходимо заново оживить вновь созданные элементы, используя новый одометр ().Используйте это в своей демонстрационной версии скрипки. 

/* 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);
0 голосов
/ 19 октября 2018

Одометр, вероятно, ищет элементы с классом odometer на document.ready, но вам придется вручную вызывать его для новых элементов: 

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

Демо

...