Fügen Sie alle 60 Sekunden zufällige div-ähnliche Werte zu mehreren Elementen hinzu

Question

Ich habe eine Seite, die so aussieht:

<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>

Ich habe mich gefragt, ob es eine Möglichkeit gibt, zufällig ein Div mit der Klasse „Prozentx“ (eine Zufallszahl zwischen 1 und 100) einzufügen, sodass es beim Laden der Seite so aussieht:

<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>

Ändert sich dann alle 60 Sekunden:

<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>

Zu diesem Thema:

$('.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>

Ich habe ehrlich gesagt keine Ahnung, wie ich diesen Code an meine Bedürfnisse anpassen kann, ich wäre für jede Hilfe sehr dankbar.

Answer 1

看一下你提供的代码片段，你可以使用$('div[class*="percent"]')来选择包含子字符串'percent'的类名。如果你希望每个div的随机百分比是唯一的，我建议使用ID名称。否则，下面的解决方案将每60秒覆盖包含'percent'的所有类名，并将其替换为'percentx'，其中x是随机生成的数字。希望这能帮到你！

<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>