Tambahkan nilai seperti div rawak pada berbilang elemen setiap 60 saat

Question

Saya mempunyai halaman yang kelihatan seperti ini:

<a href="#" onclick="go('register')">
      <img class="img" src="img/192.webp" alt="box set" />
      <div class="name" style="line-height: 2">box set</div>
    </a>
  </div>
  <div class="item ">
    <a href="#" onclick="go('register')">
      <img class="img" src="img/182.webp" alt="battery" />
      <div class="name" style="line-height: 2">battery</div>

Saya tertanya-tanya sama ada terdapat cara untuk memasukkan div secara rawak dengan kelas "peratusx" (nombor rawak antara 1-100) supaya apabila halaman dimuatkan, ia akan kelihatan seperti:

<a href="#" onclick="go('register')">
      <img class="img" src="img/192.webp" alt="box set" />
      <div class="name" style="line-height: 2">box set</div>
      <div class="percent75"></div>
    </a>
  </div>
  <div class="item ">
    <a href="#" onclick="go('register')">
      <img class="img" src="img/182.webp" alt="battery" />
      <div class="name" style="line-height: 2">battery</div>
      <div class="percent61"></div>

Kemudian berubah setiap 60 saat:

<a href="#" onclick="go('register')">
      <img class="img" src="img/192.webp" alt="box set" />
      <div class="name" style="line-height: 2">box set</div>
      <div class="percent21"></div>
    </a>
  </div>
  <div class="item ">
    <a href="#" onclick="go('register')">
      <img class="img" src="img/182.webp" alt="battery" />
      <div class="name" style="line-height: 2">battery</div>
      <div class="percent95"></div>

Mengenai topik ini:

$('.percent').each(function () {
  var x = Math.floor((Math.random() * 100) + 1);
  $(this).text(x)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="percent"></div>

Sejujurnya, saya tidak tahu cara mengubah suai kod ini untuk memenuhi keperluan saya, sebarang bantuan amat kami hargai.

Answer 1

Melihat pada coretan kod yang anda berikan, anda boleh menggunakan $('div[class*="percent"]') untuk memilih nama kelas yang mengandungi subrentetan 'peratus'. Jika anda mahu peratusan rawak unik untuk setiap div, saya syorkan menggunakan nama ID. Jika tidak, penyelesaian di bawah akan menulis ganti semua nama kelas yang mengandungi 'peratus' setiap 60 saat dan menggantikannya dengan 'percentx', di mana x ialah nombor yang dijana secara rawak. Harap ini membantu!

<div class="percent"></div>
<div class="percent"></div>
<div class="percent"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
setInterval(function() {
    $('div[class*="percent"]').each(function () {
            var x = Math.floor((Math.random() * 100) + 1);
            $(this).attr('class', 'percent' + x);
    });
}, 60000);
</script>