按id显示3个随机元素，不使用JQuery重复。如何确保它总是返回3？然后单击相同的按钮来重做该功能？
按id显示3个随机元素，不使用JQuery重复。如何确保它总是返回3？然后单击相同的按钮来重做该功能？
提问于 2017-07-17 11:01:24
我有一个代码，可以通过id随机显示三个元素，而不需要重复，这通常是可行的。当前代码显示从54张牌/html元素中选择的三张扑克牌。目前，它在大多数情况下都能正常工作，但有时它只返回两张牌，更少的情况下只返回一张，我希望通过总是返回三张来改进它。我如何修改下面的代码来做到这一点呢？
此外，如果我按下随机显示三个元素/卡片的按钮两次或更多次，它会在每次后续单击时不断添加三张卡片，直到非常多的显示和卡片耗尽。如何修改下面的代码，使其重做函数(随机显示另一组三张牌，并在第一次单击时隐藏最初的三张牌)。
我希望保留当前代码通过id选择元素的功能，因为它可以用来生成扑克牌以外的其他多个元素。
CSS设置为：
.cards {
display: none;
} 代码是：
var myarray = [
"#card1","#card2","#card3","#card4","#card5","#card6","#card7"...];
var numberOfCards = 3;
function getRandom() {
for (var i = 1; i <= numberOfCards; i++) {
var randomIndex = RandomDiv();
$('.cards:eq('+randomIndex+')').fadeIn(900).css('display', 'inline-block');
myarray.splice(randomIndex, 1);
}
}
$('.btn').on('click', function() {
getRandom();
});
function RandomDiv() {
return Math.floor(Math.random() * myarray.length);
};谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-17 11:42:44
这是一个不需要彻底检修的解决方案：
var myarray = ["#card1","#card2","#card3","#card4","#card5","#card6",
"#card7","#card8","#card9","#card10","#card11","#card12"];
var numberOfCards = 3;
$(".card").hide();
var previous = [];
function getRandom() {
if(myarray.length<3){
myarray = ["#card1","#card2","#card3","#card4","#card5","#card6",
"#card7","#card8","#card9","#card10","#card11","#card12"];
}
for (var i = 1; i <= numberOfCards; i++) {
var randomIndex = RandomDiv();
previous.push(myarray[randomIndex]);
$(myarray[randomIndex]).fadeIn(900);
myarray.splice(randomIndex, 1);
}
};
$('.btn').on('click', function() {
for(k=0; k< numberOfCards; k++){
$(previous[k]).hide(0);
}
previous = [];
getRandom();
});
function RandomDiv() {
return Math.floor(Math.random() * myarray.length);
};.card{
display: inline-block;
}
.btn{
border: 1px solid
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
Deal
</div>
<div class="card" id ="card1" >1</div>
<div class="card" id ="card2" >2</div>
<div class="card" id ="card3" >3</div>
<div class="card" id ="card4" >4</div>
<div class="card" id ="card5" >5</div>
<div class="card" id ="card6" >6</div>
<div class="card" id ="card7" >7</div>
<div class="card" id ="card8" >8</div>
<div class="card" id ="card9" >9</div>
<div class="card" id ="card10" >10</div>
<div class="card" id ="card11" >11</div>
<div class="card" id ="card12" >12</div>
所有的卡在开始时都是隐藏的，因此只需要fadeIn(900)。
请记住，数组myarray在每次交易中都变得越来越短，所以当它用完时，您应该将发过的牌返回给它。现在，这是在getRandom函数中完成的。
这是一个jsfiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45135356
复制相关文章
相似问题
腾讯云开发者
