残りのdivをランダムに選択してください。

Question

属性がrowの3つのdivがあります。ページが読み込まれたら、divの1つをランダムに選択し、クラス.showを適用したいと思います。ここから、ドキュメントをクリックすると、残りの2つのdivのdivの1つがランダムに選択され、クラス.showが適用されます。ドキュメントを再びクリックすると、最後に残ったdivには.showが適用されています。 3つのdivのクラスはすべて.showです。文書を再度クリックした場合、ビジュアルサイクルを再開して、ランダムに選択されたdivがクラス.showになるようにする必要があります。

私は自分のアプローチを（JavaScriptの初心者として）レイアウトしましたが、どのdivが残っているかを記録するrowArray（DONTのクラスは.showです）の各段階でどのように記録するかわかりませんカウンタ。

正しい方向へのポインタがあれば幸いです。私はJSFiddleにコメントをつけました。

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

あなたはrandomIndexを選択し、このリストを使用して、ショーのクラスを持っているし、その後ランダムに1つのこれらの要素にクラスのショーを追加していないすべての要素を選択して機能させることができます。この機能はすべて、ページの読み込みとドキュメントのクリックから行うことができます。

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