How to get a random element from multiple elements with the same class

Question

I have a list with some fake sale notification elements. They all have the same class. With the code I got, all notifications are shown at the same time but I only need to show 1 random notification each time. How can I do that?

This is my code at the moment:

PHP to generate the elements:

$notification .= '

  ';
    // Get fake sale notification info
    $specarticles = '
    SELECT
    c.alias as content_alias,
    c.title as content_title,
    c.catid,
    c.state,
    c.featured,
    c.images,
    ca.id,
    ca.published,
    ca.title as cat_title,
    ca.alias as cat_alias
    FROM snm_content c
    LEFT JOIN snm_categories ca
    ON c.catid = ca.id
    WHERE c.featured = 1
    AND c.state = 1
    AND ca.published = 1';
    $specarticlescon = $conn->query($specarticles);
    while($specarticles = $specarticlescon->fetch_assoc()){

        $imagesjson = json_decode($specarticles['images']);

        if(!empty($imagesjson->image_intro)){
            $image = 'https://website.nl/cms/'.$imagesjson->image_intro;
        }else{
            $image = '';
        }

        $notification .= '
        
            
                
            
            
                
                    Piet De Graaf - Spijkenisse
reserveerde '.$specarticles['content_title'].'
                    vandaag
                
            
        ';
    }
    $notification .= '
        
    
';

echo $notification;

And my jquery:

setInterval(function(){ tpj(".custom-social-proof").stop().slideToggle('slow'); }, 8000);
 tpj(".custom-close").click(function() {
   tpj(".custom-social-proof").stop().slideToggle('slow');
 });

I found out you can get something random with eq. So I tried the following:

var len = tpj(".custom-social-proof").length;
var random = Math.floor( Math.random() * len ) + 1;
setInterval(function(){ tpj(".custom-social-proof").eq(random).stop().slideToggle('slow'); }, 8000);
 tpj(".custom-close").click(function() {
   tpj(".custom-social-proof").stop().slideToggle('slow');
 });

But this stops the notification from showing up entirely. What am I doing wrong?

user_5422458 · Answer

You need to pass random inside setInterval and hide all element same class toggled.

Please try. Now you need to detect if element is alreay toggle.

var len = $(".custom-social-proof").length;
var random = 0;

setInterval(function(){ 
  random = Math.floor( Math.random() * len ) ;
  $(".custom-social-proof").hide('slow');
  $(".custom-social-proof").eq(random).stop().slideToggle('slow'); 
}, 1000);

.custom-social-proof{
  display:none;
}

How to get a random element from multiple elements with the same class

1 Answers