将数组中的所有数字填充到随机 div 中

Question

我希望获取一个包含 22 个值的列表，无论是存储为数组还是 JSON 文件，并从共享相同类的div 列表中填充一个随机div。该值只能使用一次，每个div 必须包含 1 个值，不能再多。

例如，如果我有 22 个div，我希望脚本将其中 1 个值随机放入该div 的 rel 属性中。

运行脚本之前的示例：

$values = 1,2,3,4,5
<div class="box" rel=""></div>
<div class="box" rel=""></div>
<div class="box" rel=""></div>
<div class="box" rel=""></div>
<div class="box" rel=""></div>

示例后记运行：

<div class="box" rel="4"></div>
<div class="box" rel="1"></div>
<div class="box" rel="2"></div>
<div class="box" rel="5"></div>
<div class="box" rel="3"></div>

编辑：我尝试过的

所以我尝试自己这样做，但是，我开始设置 rel 属性值，但它不起作用。可能是因为它不喜欢"框"的格式。有什么想法吗？

function setupBoxes(){
var values = ["0.01","0.50","1.00","2.50","5.00","7.50","10.00","15.00","20.00","25.00","30.00","50.00","75.00","100.00","125.00","150.00","175.00","200.00","225.00","250.00","275.00","300.00"];
function shuffleArray(array) {
for (let i = values.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[values[i], values[j]] = [values[j], values[i]];
}
} shuffleArray();
console.log(values);
var boxs = document.getElementsByClassName("box");
var arrayCount = 0;
Array.prototype.forEach.call(boxs, function(box) {
$boxValueSet = values[arrayCount];
box.attr('rel', $boxValueSet);
arrayCount++;
});
} setupBoxes();

Answer 1

在 IceMetalPunks 建议的帮助下，我最终随机化了数组，遍历类列表并从数组中设置一个值，然后在类中循环递增每个数组值。

function setupBoxes(){
var values = ["0.01","0.50","1.00","2.50","5.00","7.50","10.00","15.00","20.00","25.00","30.00","50.00","75.00","100.00","125.00","150.00","175.00","200.00","225.00","250.00","275.00","300.00"];
function shuffleArray(array) {
for (let i = values.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[values[i], values[j]] = [values[j], values[i]];
}
} shuffleArray();
console.log(values);
var boxs = document.getElementsByClassName("box");
var arrayCount = 0;
Array.prototype.forEach.call(boxs, function(box) {
$boxValueSet = values[arrayCount];
console.log(box);
box.setAttribute("rel", $boxValueSet);
arrayCount++;
});
} setupBoxes();

Answer 2

试试这个：

var values = [1, 2, 3, 4, 5];
var shuffledValues = randoSequence(values);
var boxes = document.getElementsByClassName("box")
for(var i = 0; i < boxes.length; i++){
if(i < values.length){
boxes[i].rel = shuffledValues[i].value;
}
}

randoSequence 只是 randojs.com 提供的洗牌数组的函数。欢迎您自己洗牌数组，或者如果您想了解更多信息，请查看 randojs。如果你选择使用 randoSequence 函数，只需把它扔在你的 html 文档的 head 标签中：

<script src="https://randojs.com/1.0.0.js"></script>

除此之外，我认为代码是不言自明的。如果您有任何问题，请告诉我！