javascript - 如何为一组在 Django 中创建的 for 循环中重复的 html 代码运行 JavaScript 代码？

Question

我在 html 中有这段代码，它为我的上下文变量中的每个元素创建了一个 html 代码块。

{% for car, speed in carSpeeds.items %}

<div id="car1">
    <div id="carSpeedBar">
<!-- progress bar indicating car speed value goes here -->
    </div>
</div>

<p id='result'></p>

<!-- div simply holding the variables for each iteration -->
<div class="container">
    <p id='carType'>{{ car }}</p>
    <p id='carSpeed'>{{ speed }}</p>
</div>

{% endfor %}

目标:我想为每个创建的柱运行这个 JS/JQ 代码

var bar = $('#carSpeedBar');
var result = $('#carSpeed').text();
var res = document.getElementById('result');
var width = 0;

var id = setInterval(speed, 12);

    function speed(){

        if (width < result){
            width++;
                bar.style.width = width + '%';
                res.innerHTML = width + '%';

这是我目前所拥有的并且它有效，但这只会为第一个 html 代码块创建栏并忽略其他代码，我无法弄清楚为什么。就像，它为梅赛德斯创建了一个栏，并让所有其他的空白，即使它们的值(value)正在通过。我的猜测是它拒绝覆盖元素的 ID，因为它们可能会以某种方式重复。请告诉我我做错了什么以及我应该如何实现这一目标。

谢谢。

Answer 1

正如 PRMoureu 在他的 comment 中所说的那样: 你真的应该让你的身份证正确。您可以使用 forloop.counter模板中的变量以获取从 1 开始的当前迭代编号。将该变量添加到您的 ID 中，如下所示:

<div id="carSpeedBar{{forloop.counter}}">

要做的第二件事是泛化您的 JavaScript，以便它可以处理多辆汽车。将您的代码段包装到一个以汽车 ID 作为参数的函数中，并根据此参数将您的硬编码 ID 调整为动态

function animateCarSpeed(var id) {
    var bar = $('#carSpeedBar' + id);
    //...
}

最后，您必须调用新的通用 JavaScript 函数。根据包含 JavaScript 的方式，您可以从 JavaScript 文件、模板循环内的新 script 元素或模板末尾调用该函数。