javascript - 随机选择剩余的 div Javascript

Question

我有三个具有 row 属性的 div。当页面加载时，我想随机选择一个 div 并应用类 .show。从这里开始，当单击文档时，我希望随机选择剩余两个 div 中的一个 div 并应用类 .show 。再次单击文档时，显示的最后一个剩余 div 已应用 .show。现在所有三个 div 都有类 .show。如果再次单击文档，视觉循环应该重新启动，以便只有一个随机选择的 div 具有类 .show。

我已经(作为一个 javascript 新手)阐述了我的方法，但我不知道如何跟踪记录剩余的 div(不具有该类的 div)的 rowArray .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

您可以创建一个函数来选择所有没有 show 类的元素，使用此列表选择一个 randomIndex，然后将类 show 随机添加到这些元素之一。您可以在页面加载和单击文档时使用所有这些功能。

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