如何使儿童订单随机化器具有重置回初始订单的选项？

Question

我有几个 divs，其中的内容必须经常随机化并在每个 divs 中恢复到它们的常规顺序。

我对每个 div 都使用如下函数，每个 div 使用不同的 class，完美随机化页面上的每个 div加载。随机函数效果很好，但我需要知道如何通过单击按钮然后再次返回任何随机顺序来让每个 div 恢复正常顺序，我想这可以通过使用 jQuery的切换方法。

<script>
$(function () {
    var parent = $(".randomONE");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});
</script>

已编辑：

Andrei Gheorghiu，这是 html 我用来测试你的第一个答案。它适用于第一个 DIV 但不适用于第二个。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="randomizeChildrenONE()">RandomizeONE</button>
<button onclick="resetChildrenONE()">ResetONE</button>
<div class="randomONE">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
    <script type="text/javascript">
        let initialOrder = $('.randomONE').html();
function randomizeChildrenONE() {
  let parent = $(".randomONE"),
      divs = parent.children();
  while (divs.length) {
      parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  }
}
function resetChildrenONE() {
  $(".randomONE").html(initialOrder)
}
    </script>

<br><br><br>


<button onclick="randomizeChildrenTWO()">RandomizeTWO</button>
<button onclick="resetChildrenTWO()">ResetTWO</button>
<div class="randomTWO">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
    <script type="text/javascript">
        let initialOrder = $('.randomTWO').html();
function randomizeChildrenTWO() {
  let parent = $(".randomTWO"),
      divs = parent.children();
  while (divs.length) {
      parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  }
}
function resetChildrenTWO() {
  $(".randomTWO").html(initialOrder)
}
    </script>

对不起，我是新手，不知道如何做得更好。

提前致谢！

Answer 1

这应该可以做到。

$('.random-container').each((i,elem) => 
  $('.random', elem).children().each((j,child) => 
    $(child).attr('data-order', ++j)
  )
);

$('.randomize-children').on('click tap',  randomizeChildren);
$('.reset-children').on('click tap', resetChildren);

function randomizeChildren() {
  let container = $(this).closest('.random-container'), 
      parent = $(".random", container),
      divs = parent.children();
  while (divs.length) {
      parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  }
}

function resetChildren() {
  let container = $(this).closest('.random-container'),
  children = $('.random', container).children().sort(
    (a, b) => Number($(a).data('order')) > Number($(b).data('order')) ? 1:-1
  );
  $.each(children, (i,el) => $('.random', container).append(el));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="random-container">
  <button class="randomize-children">Randomize</button>
  <button class="reset-children">Reset</button>
  <div class="random">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
</div>

<div class="random-container">
  <button class="randomize-children">Randomize</button>
  <button class="reset-children">Reset</button>
  <div class="random">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</div>


<div class="random-container">
  <button class="randomize-children">Randomize</button>
  <button class="reset-children">Reset</button>
  <div class="random">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
  </div>
</div>

如何使儿童订单随机化器具有重置回初始订单的选项？

How to make a children order randomizer with option to reset back to initial order?

javascript

random

jquery

toggle