gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 14:52:59 28 4
gpt4 key购买 nike

我正在尝试将类添加到具有相同类的三个 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 建议,我将非常感激。谢谢!

最佳答案

确保不重复的最简单方法是打乱列表并取前 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 的实现。

关于javascript - 随机.addClass到多个div而不重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48406786/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com