如何正确获取odometer.js计数器内容，解决jQuery html()取值异常问题

问题原因 #

• odometer.js在渲染数字动画时，会将原始数值拆分为多个带动画属性的独立DOM节点，元素内部会生成大量用于滚动动画的嵌套标签，直接调用html()/text()方法会拿到夹杂标签结构/乱序的内容，无法获取正确数值。

官方正确取值方法 #

odometer.js官方将当前最新数值挂载在实例的value属性上，有两种取值方式：

方式1：通过初始化时保存的实例获取 #

如果你初始化时保留了odometer实例变量，直接读取实例的value属性即可，返回值为数字类型：

// 初始化示例
const myOdometer = new Odometer({
  el: document.querySelector('.odometer'),
  value: 1234
});

// 取值
const currentValue = myOdometer.value;

方式2：通过DOM节点挂载的实例获取 #

如果没有保存初始化实例，odometer会自动将实例挂载到对应DOM元素的odometer属性上，直接读取即可：

const currentValue = document.querySelector('.odometer').odometer.value;

完整可运行示例 #

<div class='odometer'>1234</div>

<script>
// 初始化odometer
const odometerIns = new Odometer({
  el: document.querySelector('.odometer'),
  value: 1234,
  duration: 800
});

// 每3秒自动递增
setInterval(() => {
  odometerIns.update(odometerIns.value + 5);
}, 3000);

// 取值示例
function getCurrentCount() {
  // 两种方式都可以
  console.log('当前数值：', odometerIns.value);
  console.log('通过DOM取数值：', document.querySelector('.odometer').odometer.value);
}
</script>

内容的提问来源于stack exchange，提问作者Karue Benson Karue