Nach dem Zufallsprinzip verbleibende Divs auswählen Javascript

Question

Ich habe drei divs mit dem Attribut row. Wenn die Seite geladen wird, möchte ich zufällig eine der divs auswählen und die Klasse .show anwenden. Von hier aus, wenn das Dokument angeklickt wird, möchte ich, dass eine der Divs aus den verbleibenden zwei Divs zufällig ausgewählt wird und die Klasse .show darauf angewendet wird. Wenn das Dokument erneut angeklickt wird, wird das letzte verbleibende Div angezeigt, das auf .show angewendet wurde. Jetzt haben alle drei Divs die Klasse .show. Wenn das Dokument erneut angeklickt wird, sollte visual cycle neu gestartet werden, so dass nur ein zufällig ausgewähltes div die Klasse .show hat.

ich meinen Ansatz gelegt habe (als Javascript Anfänger), aber ich weiß nicht, wie Spur der rowArray zu halten, die Datensätze, die divs verbleibenden in jeder Phase der (die div-Tags, die .show haben die Klasse DONT) der Zähler.

Alle Hinweise in die richtige Richtung würden sehr geschätzt werden. Ich habe eine JSFiddle mit Kommentaren beigefügt.

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

Sie eine Funktion machen, die alle Elemente auswählt, die diese Liste auswählen zufällig Klasse zeigen zu einem dieser Elemente nicht hinzufügen Show Klasse, mit einem randomIndex und dann. Sie können all diese Funktionen beim Laden der Seite und beim Klicken auf das Dokument ausführen.

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