如何使一个孩子的顺序随机发生器与选项，以重置回初始顺序？
如何使一个孩子的顺序随机发生器与选项，以重置回初始顺序？
提问于 2018-09-18 06:09:17
我有几个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>编辑：
Andrei Gheorghiu，这是我用来测试你的第一个答案的html。它适用于第一个DIV，但不适用于第二个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
Stack Overflow用户
回答已采纳
发布于 2018-09-18 06:40:58
这个应该可以了。
$('.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52376320
复制相关文章
相似问题