javascript - 随机.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 的实现。