里程表 JS 相似 class 名称

Question

我想在这里创建一个我的里程表使用相同的 class 并且只声明一次。我试过 document.querySelectorAll('.odometer') 但它不起作用。请参阅下面的参考资料

到目前为止我尝试过的：其他 link (http://jsfiddle.net/9hawxpne/)

const elements = document.querySelectorAll('.odometer');
Array.from(elements).forEach((element, index) => {
  ticketOdometer = new Odometer({
    el: elements[index] ,
    minIntegerLen: 2,
    format: 'd',
    theme: 'digital',
    value: 40
  });
});




var odometer_bool_counter = true;

function setRandomOdometerValue() {
  if (odometer_bool_counter) {
    $('.odometer').html(Math.floor(Math.random() * (40 - 1 + 1) + 1)); // change value
  }
}
setInterval(function() {
  setRandomOdometerValue();
}, 2500);

<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-digital.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>



<div id="odometer" class="odometer" style="font-size:72pt;">
  40
</div>
<div id="" class="odometer" style="font-size:72pt;">
  40
</div>
<div id="" class="odometer" style="font-size:72pt;">
  40
</div>
<div id="" class="odometer" style="font-size:72pt;">
  40
</div>
<div id="" class="odometer" style="font-size:72pt;">
  40
</div>

Answer 1

在 setRandomOdometerValue 函数中，您想更改每个 .odometer 的内部 html。

由于您已经在使用 jQuery，因此您可以使用 jQuery each。

$('.odometer').each(function() {
  $(this).html(Math.floor(Math.random() * (40 - 1 + 1) + 1));
})

但你也可以只使用 javascript:

elements.forEach((element) => {
  element.innerHTML = Math.floor(Math.random() * (40 - 1 + 1) + 1)
});

const elements = document.querySelectorAll('.odometer');

Array.from(elements).forEach((element, index) => {
  ticketOdometer = new Odometer({
    el: elements[index] ,
    minIntegerLen: 2,
    format: 'd',
    theme: 'digital',
    value: 40
  });
});

function setRandomOdometerValue() {
  $('.odometer').each(function() {
    $(this).html(Math.floor(Math.random() * (40 - 1 + 1) + 1)); // change value
  })
}

setInterval(() => {
  setRandomOdometerValue();
}, 2500);

<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-digital.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

<div class="odometer">40</div>
<div class="odometer">40</div>
<div class="odometer">40</div>
<div class="odometer">40</div>
<div class="odometer">40</div>

里程表 JS 相似 class 名称

Odometer JS similar class name

javascript

jquery

odometer