Question

我有一个代码随机显示三个div，点击时没有重复，由他们的id选择。现在它被用于扑克牌，但是我想保留它当前通过id而不是任何其他方法显示元素的功能，因为它可以被重新用于显示其他类型的元素和图像等。可以在CSS中设置样式。

现在代码几乎按照我希望的方式工作。唯一的问题是它按照用html编写的顺序显示卡片，即：

element1, element2, element3...element4, etc.

返回类似的内容：

element9, element27, element48

（例如）当我运行该函数时。我希望这三个元素以随机顺序生成，而不管它们在html中编码的顺序如何，因此可以在序列中生成三个div，例如

element54, element21, element36

有人知道如何修改以下代码吗？

Jquery的：

var myarray = [                    
"#card1","#card2","#card3","#card4","#card5","#card6","#card7","#card8","#card9","#card10","#card11","#card12","#card13","#card14","#card15","#card16","#card17","#card18","#card19","#card20","#card21","#card22","#card23","#card24","#card25","#card26","#card27","#card28","#card29","#card30","#card31","#card32","#card33","#card34","#card35","#card36","#card37","#card38","#card39","#card40","#card41","#card42","#card43","#card44","#card45","#card46","#card47","#card48","#card49","#card50","#card51","#card52","#card53","#card54"
];
var numberOfCards = 3;
$(".cards").hide();

var previous = [];

function getRandom() {

   if(myarray.length<3){
       myarray =     ["#card1","#card2","#card3","#card4","#card5","#card6","#card7","#card8","#card9","#card10","#card11","#card12","#card13","#card14","#card15","#card16","#card17","#card18","#card19","#card20","#card21","#card22","#card23","#card24","#card25","#card26","#card27","#card28","#card29","#card30","#card31","#card32","#card33","#card34","#card35","#card36","#card37","#card38","#card39","#card40","#card41","#card42","#card43","#card44","#card45","#card46","#card47","#card48","#card49","#card50","#card51","#card52","#card53","#card54"
];
   }

   for (var i = 1; i <= numberOfCards; i++) {
       var randomIndex = RandomDiv();
       previous.push(myarray[randomIndex]);
       $(myarray[randomIndex]).fadeIn(900).css('display', 'inline-block');
       myarray.splice(randomIndex, 1);
   }
};

$('.contact-btn').on('click', function() {
   for(k=0; k< numberOfCards; k++){
   $(previous[k]).hide();
   }
   previous = [];
   getRandom();
});

function RandomDiv() {
    return Math.floor(Math.random() * myarray.length);
}

Html（这只是一个片段，完整代码最多可达54张）：

<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href=style.css>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type"text/javascript" src="js/main.js"></script>
  </head>
    <div class="card">
      <div style="font-size: 24px" style="display; inline-block">       
        <div class="cards" id="card1"><span style="color: #C23B22">2♦</span></div>
        <div class="cards" id="card2"><span style="color: #C23B22">2♥</span></div>
        <div class="cards"id="card3">2♣</div>
        <div class="cards" id="car4">2♠</div>
        <div class="cards" id="card5"><span style="color: #C23B22">3♦</span></div>
        <div class="cards" id="card6"><span style="color: #C23B22">3♥</span></div>
        <div class="cards" id="card7">3♠</div>
        <div class="cards" id="card8">3♣</div>
        <div class="cards" id="card9"><span style="color: #C23B22">4♦</span></div>
        <div class="cards" id="card10"><span style="color:#C23B22">4♥</span></div>
        <div class="cards" id="card11">4♣</div>
        <div class="cards" id="card12">4♠</div>
        <div class="cards" id="card13"><span style="color:#C23B22">5♦</span></div>
        <div class="cards" id="card14"><span style="color:#C23B22">5♥</span></div>
        <div class="cards" id="card15">5♣</div>
    ...
  </div>
</div>
<input type="button" id="Button" value="Random" onclick="RandomDiv();" />

CSS：

cards {
display: none;
}

我还想让它以这个速度逐渐消失。我知道代码正在挑选三张随机卡并按照它们的编写顺序显示它们，所以我想要任何关于更改代码/修改函数的建议，以便它以随机顺序显示/生成三个卡/元素（没有重复），而不是按升序显示三张牌。谢谢！

如何随机化三个没有重复点击的随机生成的div的顺序？

0 个答案: