Question

我想在没有任何空格的情况下随机播放我的div。我使用JavaScript代码进行随机播放，但它无法正常工作，有时在重新加载页面后会显示空格。

这是我的JavaScript代码：

var cards = $(".random");
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));
}

这是我的样本div标签：

<div class="col-sm-4 random" align="center" id="random">
    <div class="thumbnail" id="border">
        <a href="#modal-2" onclick="lockScroll()"><img src="img/findmyfare.jpg" style="width:100%" class="d-block w-100" class="img-fluid"></a>
        <div class="caption offers">
            <a href="#modal-2" onclick="lockScroll()">
                <div class="offer-wrap">
                    <div class="img-wrap" data-backimg="offers-shopping">
                    </div>
                    <div class="title2">
                        <h5 style="text-align:left;padding-left:10px;color:white;">Up to 25% off on flight<br>
                            bookings
                        </h5>
                    </div>
            </a>
        </div>
        <h4 style="padding-top:10px; color:#262362;text-align:left;font-size: 125% !important; cursor: pointer;" href="#modal-2" onclick="lockScroll()">findmyfare</h4>
           <p style="text-align:left; cursor: pointer;" class="text2" href="#modal-2">Offer valid from 20 June - 20 July 2017</p><br>
       </div>
    </div>

Answer 1

你真的没有洗牌，你将卡从原来的位置转移到新的位置。结果是原始位置变空 - 并且它将保持为空，除非random()恰好在以后选择该空位作为目标。

这个隐藏的片段会显示（运行它，然后按shuffle按钮）：

function shuffle() {
  var cards = $(".random");
  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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[<span class="random">A</span>]
[<span class="random">B</span>]
[<span class="random">C</span>]
[<span class="random">D</span>]
[<span class="random">E</span>]
[<span class="random">F</span>]
[<span class="random">G</span>]
[<span class="random">H</span>]
<br/>
<button onclick="shuffle()">shuffle</button>

您可以通过区分位置与卡本身，然后通过实际卡交换来改善这一点，以便位置始终包含一张卡片。

使用新方法，索引计算需要不同，所以我也改变了。

改进代码段：

function shuffle() {
  var cards = $(".random");
  for (var i = 0; i < cards.length; i++) {
    var index1 = Math.floor(Math.random() * cards.length);
    var index2 = Math.floor(Math.random() * cards.length);
    var card1 = cards.eq(index1);
    var card2 = cards.eq(index2);
    var location1 = card1.closest(".location");
    var location2 = card2.closest(".location");
    location1.append(card2);
    location2.append(card1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[<span class="location"><span class="random">A</span></span>]
[<span class="location"><span class="random">B</span></span>]
[<span class="location"><span class="random">C</span></span>]
[<span class="location"><span class="random">D</span></span>]
[<span class="location"><span class="random">E</span></span>]
[<span class="location"><span class="random">F</span></span>]
[<span class="location"><span class="random">G</span></span>]
[<span class="location"><span class="random">H</span></span>]
<br/>
<button onclick="shuffle()">shuffle</button>

Answer 2

您可以分2步完成

1）列出所有单元格中的所有卡

2）通过替换逻辑开始对它们进行洗牌（取一张随机卡取另一张并替换另一张）

在这种情况下，您将没有任何空白空间，您可以通过定义循环计数来控制随机播放的硬度

随机化div标签，不带任何空格

2 个答案: