0

让 Odometer JS 在多个元素上工作有点麻烦。我正在通过 Nunjucks 宏创建 5 个元素，并将数据属性传递给里程表进行处理。

这是 Nunjucks 宏当前的样子：

{% for item in items | sort(attribute = item.sum) | limit(5) %}

<div class="odometer" data-counterAmount="{{ item.counterAmount }}"></div>
        
{%- endfor -%}

当前的jQuery代码：

$(".odometer").each(function(){

    let el = $(this);
    let counterAmount = el.attr("data-counterAmount");

    od = new Odometer({
        el: el,
        value: counterAmount,
        // format: 'd',
        animation: 'ease',
        duration: 400,
    });

});

但是，我收到此错误：

Uncaught TypeError: this.el.appendChild is not a function
    at a.renderInside (odometer.min.js:2)
    at new a (odometer.min.js:2)
    at HTMLDocument.eval (mine.js:11)
    at e (jquery-3.6.0.min.js:2)
    at t (jquery-3.6.0.min.js:2)

关于如何解决这个问题的任何线索？非常感谢任何提示，谢谢

4

1 回答 1

1

You need to use el: el[0]

Because .appendChild is for javascript and not jquery

Demo

$(".odometer").each(function() {

  let el = $(this);
  let counterAmount = el.attr("data-counterAmount");

  od = new Odometer({
    el: el[0],
    value: counterAmount,
    // format: 'd',
    animation: 'ease',
    duration: 400,
  });

});
.odometer {
  font-size: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Odometr includes -->
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-car.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>
<div class="odometer" data-counterAmount="123"></div>
<div class="odometer" data-counterAmount="456"></div>

于 2022-01-28T08:36:12.543 回答