Javascript 将数组中的随机类添加到每个指定元素，不包括上次使用的类

我有一个带有类的数组，我想将这个数组中的随机类应用于指定的元素——这很简单。但我需要避免像一行中的两个或多个元素具有相同的类这样的情况

现在我有这样的东西：

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

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

---

可能与您想要的有点不同，但这将一直运行，直到列表中没有更多的类，每次随机选择一个并分配它。香草JS解决方案也是如此

//Running as many times as there are items in classes
for (i=0; i<classes.length; i++) {
    var randomPick = Math.floor(Math.random()*classes.length)+1];

    //Change this to target whatever you are adding the classes to
    document.getElementsByClassName("img-cap").classList.add(classes[randomPick]);

    //Will edit the class list, removing it so it may not be picked again
    classes.splice(randomPick,1);
}

//运行的次数与类中的项相同
for（i=0；i可能与您想要的有点不同，但这将一直运行，直到列表中没有更多的类，每次随机选择一个类并分配它

//Running as many times as there are items in classes
for (i=0; i<classes.length; i++) {
    var randomPick = Math.floor(Math.random()*classes.length)+1];

    //Change this to target whatever you are adding the classes to
    document.getElementsByClassName("img-cap").classList.add(classes[randomPick]);

    //Will edit the class list, removing it so it may not be picked again
    classes.splice(randomPick,1);
}

//运行的次数与类中的项相同
对于（i=0；i您可以先缓存随机数，然后使用
hasClass（）
方法确定是否应用它

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

    $(".img-cap").each(function(){
        var class_to_add = ~~(Math.random()*classes.length);
        console.log(class_to_add);
        if($(this).hasClass(classes[class_to_add]) === false) {
            $(this).addClass(classes[class_to_add]);
        }
    });
});

在这里，我完全不知道在这篇文章发表之前，
~~（Math.random（）*classes.length
会产生什么，所以谢谢你。
你可以先缓存随机数，然后使用
hasClass（）
方法来决定是否应用它

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

    $(".img-cap").each(function(){
        var class_to_add = ~~(Math.random()*classes.length);
        console.log(class_to_add);
        if($(this).hasClass(classes[class_to_add]) === false) {
            $(this).addClass(classes[class_to_add]);
        }
    });
});

在这里，我完全不知道在这篇文章之前，
~~（Math.random（）*classes.length
会产生什么，所以谢谢你。
克隆类数组，然后使用克隆设置类，并从克隆中删除所有类，直到没有剩余。然后再次克隆


var类=[“bg1”、“bg2”、“bg3”、“bg4”、“bg5”]；
var classesClone=classes.slice（0）；//克隆类
$（'.img cap'）。每个（函数（）{
if（0==classesClone.length）{
//如果classesClone为空，则允许再次克隆
classesClone=classes.slice（0）；
}
var randomNumber=Math.floor（Math.random（）*classesClone.length）；
$（this.addClass（classesClone[randomNumber]）；
claise.splice（randomNumber，1）；//从刚刚使用的克隆中删除项
})；
.row{
边框：实心1px黑色；
浮动：左；
}
.img帽{
宽度：30px；
高度：30px；
利润率：10px；
}
.bg1{
背景颜色：橙色；
}
.bg2{
背景颜色：绿色；
}
.bg3{
背景色：红色；
}
.bg4{
背景色：海军蓝；
}
.bg5{
背景色：石灰；
}
克隆类数组，然后使用克隆设置类并从克隆中删除所有类，直到什么都没有剩下。然后再次克隆


var类=[“bg1”、“bg2”、“bg3”、“bg4”、“bg5”]；
var classesClone=classes.slice（0）；//克隆类
$（'.img cap'）。每个（函数（）{
if（0==classesClone.length）{
//如果classesClone为空，则允许再次克隆
classesClone=classes.slice（0）；
}
var randomNumber=Math.floor（Math.random（）*classesClone.length）；
$（this.addClass（classesClone[randomNumber]）；
claise.splice（randomNumber，1）；//从刚刚使用的克隆中删除项
})；
.row{
边框：实心1px黑色；
浮动：左；
}
.img帽{
宽度：30px；
高度：30px；
利润率：10px；
}
.bg1{
背景颜色：橙色；
}
.bg2{
背景颜色：绿色；
}
.bg3{
背景色：红色；
}
.bg4{
背景色：海军蓝；
}
.bg5{
背景色：石灰；
}

你可以这样做。
它将随机选择正在使用的类，一旦使用，它将从
类数组中删除该条目

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

    $(".img-cap").each(function(){
        var cssClass = classes[~~(Math.random()*classes.length)],
            index = classes.indexOf(cssClass)

        classes.splice(index, 1);

        $(this).addClass(cssClass);

    });
});

你可以这样做。
它将随机选择正在使用的类，一旦使用，它将从
类数组中删除该条目

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

    $(".img-cap").each(function(){
        var cssClass = classes[~~(Math.random()*classes.length)],
            index = classes.indexOf(cssClass)

        classes.splice(index, 1);

        $(this).addClass(cssClass);

    });
});

简单地说：

    $(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];
    var temp ='a';
    var x = 'a';
    $(".img-cap").each(function(){
        while(x===temp)
            x = classes[~~(Math.random()*classes.length)]
        temp = x
    //console.log(x)
    $(this).addClass(x);
    });
});

在
foreach
循环的每次迭代中，while循环不断地选择一个随机类，直到所选类与上一次迭代中所选的类不同，从而保证没有两个连续的元素获得相同的类

Karl AndréGagnon的asnwer确实更全面（速度也更快）。但如果您只有几个类可供选择，则上面的while循环应该不会花费很长时间才能产生新值。如果有很多类，则Karl的解决方案可能是更好的选择。
简单来说：

    $(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];
    var temp ='a';
    var x = 'a';
    $(".img-cap").each(function(){
        while(x===temp)
            x = classes[~~(Math.random()*classes.length)]
        temp = x
    //console.log(x)
    $(this).addClass(x);
    });
});

在
foreach
循环的每次迭代中，while循环不断地选择一个随机类，直到所选类与上一次迭代中所选的类不同，从而保证没有两个连续的元素获得相同的类

卡尔·安德烈·加农（Karl AndréGagnon）的《阿斯纳》（asnwer）更彻底（也更快）。但是，如果您只有几个类可供选择，则上面的while循环应该不会花费很长时间才能生成新值。如果有许多类，则Karl的解决方案可能是更好的选择。
关键是将最后一个随机值保存在变量中，然后将其从数组中删除。在接下来的迭代中，该类将不在数组，因此不可能两次使用同一类。但重要的是在选择新的随机类后推送上次使用的类


$（文档）.ready（函数（）{
风险等级=[“bg1”、“bg2”、“bg3”、“bg4”、“bg5”]，最后一级；
$（“.img cap”）。每个（函数（）{
var rdm_int=~（Math.random（）*classes.length）；
var rdm_class=classes.splice（rdm_int，1）[0]；
如果（最后一个类）类。推送（最后一个类）
$（此）.addClass（rdm_类）；
最后一级=rdm级；
});
})；
.img cap{
宽度：100px；
高度：100px
}
.bg1{背景：红色}
.bg2{背景：蓝色}
.bg3{背景：黄色}
.bg4{背景：橙色}
.bg5{背景：紫色}
关键是将最后一个随机值保存在变量中，然后将其从数组中删除