Как сделать детский рандомизатор с возможностью сброса обратно в исходный порядок? - PullRequest
Новая
       7

Как сделать детский рандомизатор с возможностью сброса обратно в исходный порядок?

0 голосов
/ 18 сентября 2018

У меня есть несколько элементов div, содержимое которых часто должно быть рандомизировано, и в каждом из этих элементов div они возвращаются к своему обычному порядку.

Я использую функцию, аналогичную приведенной ниже, для каждого из этих элементов div, с другим классом длякаждый div, идеально рандомизируя каждый div при загрузке страницы.Функция random работает отлично, но мне нужно знать, как вернуть каждый 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>

РЕДАКТИРОВАНИЕ:

Андрей Георгиу, это 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>

Извините, я новичок и не знаю, как сделать это лучше.

Спасибо взаранее!

1 Ответ

0 голосов
/ 18 сентября 2018

Это должно сделать это. 

$('.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>
...