随机 .addClass 到多个 div 而不重复

Question

我正在尝试将类添加到具有相同类的三个 div，但我不希望添加的任何类重复。

我有一个脚本可以向同时显示的 1、2 或 3 个 div 添加一个类。想要的效果是将图像显示为背景图像，并且在我的样式表中，我有多个类，这些图像附加到它们上面。这些类在以下代码中定义并添加到相关的 div 中：

Javascript

$(document).ready(function(){
var classes = ["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11"];

    $(".S").each(function(){
    $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
});

此代码附加到以下 HTML

<div class="brick">
    <div class="blend S"></div>
    <div class="blend S"></div>
    <div class="blend S"></div>
</div>

以下是此组合当前可能返回的一个结果示例：

<div class="brick">
    <div class="blend S a01"></div>
    <div class="blend S a01"></div>
    <div class="blend S a06"></div>
</div>

注意a01的重复。以下是想要的结果：

<div class="brick">
    <div class="blend S a05"></div>
    <div class="blend S a02"></div>
    <div class="blend S a11"></div>
</div>

Here is a live test。如果有人对我如何规避重复问题有任何 jquery 建议，我将非常感激。谢谢！

Answer 1

确保不重复的最简单方法是打乱列表并取前 3 个元素：

$(document).ready(function(){
    var classes = shuffle(["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11"]);

    $(".S").each(function(i){
       $(this).addClass(classes[i]);
    });
});

请注意，我没有包含 shuffle 的实现。

Answer 2

您可以使用splice()。如果您使用随机索引和 1 作为长度调用它，它将删除该单个项目并将其返回到一个数组中，您可以从中获取第一个（也是唯一一个）项目。由于它删除了它使用的项目，因此不会重复任何项目。

$(document).ready(function(){
var classes = ["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11"];

  $(".S").each(function(){
    $(this).addClass(classes.splice(~~(Math.random()*classes.length), 1)[0]);
  });
});

.blend {
width: 150px;
height: 30px;
}
.a01 {
  background: red;
}

.a02 {
  background: blue;
}

.a03 {
  background: green;
}

.a04 {
  background: black;
}

.a05 {
  background: yellow;
}

.a06 {
  background: purple;
}

.a07 {
  background: orange;
}

.a08 {
  background: grey;
}

.a09 {
  background: cyan;
}

.a10 {
  background: pink;
}

.a11 {
  background: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="brick">
    <div class="blend S"></div>
    <div class="blend S"></div>
    <div class="blend S"></div>
</div>

Answer 3

如果你不介意修改原始数组，那么将数组拼接起来不会有重复元素呢？

$(document).ready(function(){
    var classes = ["a01", "a02", "a03", "a04"];

    $(".S").each(function(){
        $(this).addClass(classes.splice(Math.floor(Math.random() * classes.length), 1));
    });
});

只是一个建议。 Fiddle