Sélectionnez au hasard les divs restants Javascript

Question

J'ai trois divs avec l'attribut row. Lorsque la page se charge, je veux sélectionner l'une des divs au hasard et appliquer la classe .show. De là, lorsque le document est cliqué, je veux que l'un des divs des deux divs restants soit sélectionné au hasard et que la classe .show soit appliquée. Lorsque vous cliquez à nouveau sur le document, les derniers div affichés .show sont appliqués. Maintenant, tous les trois divs ont la classe .show. Si le document est à nouveau cliqué, le cycle visuel doit être redémarré de sorte qu'un seul div sélectionné au hasard ait la classe .show.

J'ai exposé (en tant que novice javascript) mon approche, mais je ne sais pas comment garder une trace des rowArray qui enregistre ce qui divs sont restantes (les divs qui ont la classe DonT .show) à chaque étape de le compteur.

Tout pointeur dans la bonne direction serait grandement apprécié. J'ai joint un JSFiddle avec des commentaires.

var selector = Math.floor((Math.random() * 3)); 
 
var rowArray = [0, 1, 2]; 
 
var counter = 0; 
 

 
$(document).ready(function() { 
 
    counter++ 
 

 
    $('#cnt').find("div[row=" + selector +"]").addClass('show'); 
 
    var newrowArray = rowArray.splice(selector, 1); 
 

 
    $(document).on("click", function() { 
 
     counter++ 
 
     if (counter ==1) { 
 

 
     } else if (counter == 2) { 
 

 
     } else { 
 
      counter = 1; 
 

 
     } 
 
    }); 
 
});

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

 
<div id="cnt"> 
 
    <div row="0"></div> 
 
    <div row="1"></div> 
 
    <div row="2"></div> 
 
</div>

Answer 1

vous pouvez faire une fonction qui sélectionne tous les éléments qui ne disposent pas de classe montrent, avec cette liste, sélectionnez un randomIndex puis ajouter au hasard montrent de classe à l'un de ces éléments. Vous pouvez toute cette fonction sur le chargement de la page et de cliquer sur le document.

$(document).ready(function() { 
 

 
function selectDiv(){ 
 
    var notSelectedDivs = $("div[row]:not(.show)"); 
 
    
 
    if(!notSelectedDivs.length){ 
 
     $('.show').removeClass('show'); 
 
     notSelectedDivs = $("div[row]:not(.show)"); 
 
    } 
 
    var randomIndex = Math.floor((Math.random() * notSelectedDivs.length)); 
 
    $(notSelectedDivs[randomIndex]).addClass('show'); 
 
} 
 

 

 
$(document).on("click", function() { 
 
    selectDiv(); 
 
}); 
 
selectDiv(); 
 
});

.show{ 
 
color: #ff0000; 
 
}

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

 
<div id="cnt"> 
 
<div row="0">1</div> 
 
<div row="1">2</div> 
 
<div row="2">3</div> 
 
</div>