我有三个具有 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>
最佳答案
您可以创建一个函数来选择所有没有 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>
关于javascript - 随机选择剩余的 div Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45719740/