时间戳

首页 > 解决方案 > 如何为一组在 Django 中创建的 for 循环中重复的 html 代码运行 JavaScript 代码？

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

问题描述

我在 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 代码块创建栏并忽略其他代码，我不知道为什么。就像，它为梅赛德斯创造了一个酒吧，而其他所有的人都留了空白，即使他们的价值观正在通过。我的猜测是它拒绝覆盖元素的 ID，因为它们可能会以某种方式被复制。请告诉我我做错了什么以及我应该如何实现这一目标。

谢谢。

标签： javascriptjqueryhtmldjango

解决方案

正如 PRMoureu 在他的评论中已经说过的那样：你真的应该把你的 id 弄对。您可以在模板中使用forloop.counter变量来获取从 1 开始的当前迭代次数。将该变量添加到您的 id 中，如下所示：

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

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

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

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

推荐阅读