Question

每次刷新页面时，我应该怎样做以随机顺序显示。

这里是我在我的WordPress文本编辑器中添加的内容，它显示图像完全正常，但它没有随机化div的顺序。我做错了什么？

<br><br>
<div class="quiz">
<a href="http://www.thequizmania.com/we-bet-you-cant-pass-this-tricky-general-knowledge-quiz/">
<img src="http://i.imgur.com/3YcBoyN.jpg"></img>
<a>
</div>

<br>
<div class="quiz">
<a href="http://www.thequizmania.com/what-kind-of-traveler-are-you/">
<img src="http://i.imgur.com/GZn9myC.jpg"></img>
<a>
</div>

<br>
<div class="quiz">
<a href="http://www.thequizmania.com/what-two-words-describe-you-as-a-mother/">
<img src="http://i.imgur.com/QnJezBF.jpg"></img>
<a>
</div>

<br>
<div class="quiz">
<a href="http://www.thequizmania.com/can-you-pick-the-correct-word/">
<img src="http://i.imgur.com/Pdi9dyo.jpg"></img>
<a>
</div>

<br>
<div class="quiz">
<a href="http://www.thequizmania.com/can-you-pass-this-almost-impossible-shapes-test/">
<img src="http://i.imgur.com/Ov5WdOg.jpg"></img>
<a>
</div>

<br>

<script>
var cards = $(".quiz");
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}
</script>

Answer 1

您可以使用Math.random随机化它。

  var divContents = ['<br><div class="quiz"><a href="http://www.thequizmania.com/can-you-pass-this-almost-impossible-shapes-test/"><img src="http://i.imgur.com/Ov5WdOg.jpg"></a></div>', 'second', 'thrid', '4th', '5th', '6th'];
  var len = divContents.length;
  var parent = document.getElementById('parent');
  
  for(i=0;i<len;i++) {
    var random = Math.floor(Math.random()*(divContents.length));
    parent.innerHTML += (divContents[random]);
    divContents.splice(random, 1);
  }

<div id="parent">

</div>

Answer 2

您的代码运行正常。我只是：

已修复<a>代码
添加了Jquery库

Here your code on Jsfiddle

javascript - 每次刷新页面时以随机顺序显示

2 个答案: