Question 222954 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Add Random div class value every 60 seconds in multiple elements

I have a page that looks like

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

I was wondering if there is a way that I could insert a div class randomly "percentx" (random between 1-100), so when the page is loaded, it would look like:

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

Then change every 60 second

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

Regarding this thread

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

Honestly I have no idea how to modified this code for my needs, any helps would highly apreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    @ebod here is the modified code,

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="percent"></div>
<div id="pp" class="group_flex">
<a class="items " href="#" onclick="go('daftar')"><img loading="lazy" class="gimg" src="img/18.webp" alt="Jagung" />  <div class="gname">Jagung</div><div class="percent52"></div></a>
<a class="items " href="#" onclick="go('daftar')"><img loading="lazy" class="gimg" src="img/77.webp" alt="Semangka" />  <div class="gname">Semangka</div><div class="percent44"></div></a>
<a class="items " href="#" onclick="go('daftar')"><img loading="lazy" class="gimg" src="img/109.webp" alt="Nanas" />  <div class="gname">Nanas</div><div class="percent59"></div></a>
</div>

    and

    function additems(){
    document.getElementById('pp').className = 'items ';
}
function addhot(){
document.getElementById('pp').setAttribute( "class", "items hot" );
// need some code to add <img class="overlay-img" src="css/img/logo-hot.gif" >
}
  
setInterval(function() {
    $('div[class*="percent"]').each(function () {
            var x = Math.floor((Math.random() * 100) + 1);
            if (x < 50 ){
            $(this).attr('class', 'percent' + x);
            additems()
            } else {
            addhot()
         }    
    });
}, 2000);

    using the var x value

    if (x < 50) <a class="items " did not change any

    if (x > 50 ) <a class="items " change to <a class="items hot " next add another class <img class="overlay-img" src="css/img/logo-hot.gif" > for cosmetic purposes.

    however, this code only change the first children of group_flex class, and for some reason the value < 50 sometimes change the class items to items hot.

    Please help.


  2. 0

    Taking a look at the snippet you provided, you can use $('div[class*="percent"]') which will select class names containing the substring ‘percent’. I would suggest using ID names if you want the random percentages to be unique per div. Otherwise, the solution below will overwrite all class names every 60 seconds that contain ‘percent’ with ‘percentx’ where x is the randomly generated number. Hope this helps!

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search