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

【问题标题】：Populate all numbers from array into random divs将数组中的所有数字填充到随机 div 中
【发布时间】：2019-12-19 21:28:23
【问题描述】：

我希望获取 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();

【问题讨论】：

我的建议：打乱数组，然后按顺序遍历每个 div，给它数组中相应元素的值。您需要Array.sort、Math.random、document.getElementsByClassName（或document.querySelectorAll）和for 循环。调查这些事情并自己尝试；如果你不能让它工作，发布你尝试过的代码，我们会从那里帮助你。
@IceMetalPunk 好建议，我知道如何洗牌数组，但会很感激如何遍历每个 div。
@IceMetalPunk 补充说我已经走了多远，有什么想法吗？
.attr 是一个 jQuery 方法，它不是普通 JS 的一部分。另一方面，getElementsByClassName 是普通 JS 的一部分，它返回一个可迭代的 DOM 元素列表，而不是 jQuery 对象。直接设置box.rel = $boxValueSet即可。
@AaronPlocharczyk 我自己的答案，所以不能投票。

标签： javascript php jquery json

【解决方案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();

【讨论】：

【解决方案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>

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

【讨论】：