Question

我有3个不同内容的盒子，可以随机播放。

<div class="shuffle style">
    <div>A1</div>
    <div>A2</div>
    <div>A3</div>
    <div>A4</div>
    <div>A5</div>
    <div>A6</div>
    <div>A7</div>
    <div>A8</div>
    <div>A9</div>
</div>
<div class="shuffle2 style">
    <div>B1</div>
    <div>B2</div>
    <div>B3</div>
    <div>B4</div>
    <div>B5</div>
    <div>B6</div>
    <div>B7</div>
    <div>B8</div>
    <div>B9</div>
</div>
<div class="shuffle3 style">
    <div>C1</div>
    <div>C2</div>
    <div>C3</div>
    <div>C4</div>
    <div>C5</div>
    <div>C6</div>
    <div>C7</div>
    <div>C8</div>
    <div>C9</div>
</div>

我使用此代码进行随机播放：

$(function () {
    var parent = $(".shuffle");
    var divs = parent.children().remove();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});

当所有3个框具有相同的类（.shuffle）时，混合不正确。所以我为每个盒子添加了一个新的类名（shuffle2，shuffle3）。

是否可以将此功能称为一个脚本？

查看我的工作小提琴3个脚本here

Answer 1

只需使用$.each()

即可

<div class="shuffle style">
  <div>A1</div>
  <div>A2</div>
  <div>A3</div>
  <div>A4</div>
</div>
<div class="shuffle style">
  <div>B1</div>
  <div>B2</div>
  <div>B3</div>
  <div>B4</div>
</div>
<div class="shuffle style">
  <div>C1</div>
  <div>C2</div>
  <div>C3</div>
  <div>C4</div>
</div>

$(function () {
    $(".shuffle").each(function () {
        var parent = $(this),
            divs = parent.children().remove();

        while (divs.length) {
            parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
        }
    });
});

fiddle

来自多个盒子的随机播放

1 个答案: