Tengo algunos problemas para que Odometer JS funcione en varios elementos. Estoy creando 5 elementos a través de macros de Nunjucks y estoy pasando un atributo de datos a Odometer para que sea procesado.
Así es como se ve actualmente la macro Nunjucks:
{% for item in items | sort(attribute = item.sum) | limit(5) %} <div class="odometer" data-counterAmount="{{ item.counterAmount }}"></div> {%- endfor -%}El código jQuery actual:
$(".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, }); });Sin embargo, estoy recibiendo este error:
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)¿Alguna pista sobre cómo resolver esto? Cualquier consejo es muy apreciado, gracias
Necesitas usar el: el[0]
Porque .appendChild es para javascript y no para jquery
Manifestación
$(".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>