Djangoで作成されたforループで繰り返される一連のHTMLコードのJavaScriptコードを実行するにはどうすればよいですか?

Djangoで作成されたforループで繰り返される一連のHTMLコードのJavaScriptコードを実行するにはどうすればよいですか? image 2 Info

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;

Djangoで作成されたforループで繰り返される一連のHTMLコードのJavaScriptコードを実行するにはどうすればよいですか? image 1

var id = setInterval(speed, 12);

function speed(){

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

これは私がこれまで持っていたもので、動作しますが、これはHTMLコードの最初のブロックのバーを作成し、他のブロックを無視するだけで、理由を理解できません。同様に、メルセデスのバーを作成し、値が通過していても他のすべてのバーを空白にします。私の推測では、要素のIDを上書きすることを拒否しているため、何とか複製される可能性があります。私が間違っていることと、これを達成する方法を教えてください。

ありがとう。

ベストアンサー

PRMoureuはすでにコメントで言っているように:あなたは本当にあなたのIDを正しく取得する必要があります。 テンプレート内で forloop.counter 変数を使用して、1から始まる現在の反復番号を取得できます。その変数を次のようにIDに追加します。

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

2つ目は、複数の車を処理できるように、JavaScriptを一般化することです。 スニペットをパラメータとしてcar idをとり、ハードコードされたIDをこのパラメータに従って動的に調整する関数にラップします

function animateCarSpeed(var id) {
var bar = $(‘#carSpeedBar’ + id);
//…
}

Djangoで作成されたforループで繰り返される一連のHTMLコードのJavaScriptコードを実行するにはどうすればよいですか? image 0

最後に、新しい一般化されたJavaScript関数を呼び出す必要があります。 JavaScriptをインクルードする方法に応じて、JavaScriptファイル内、テンプレートループ内の新しいscript要素、またはテンプレートの最後に関数を呼び出します。






source
javascript forループでコードを繰り返さないようにするにはどうすればよいですか?
forループで一連のPHP変数関数を作成して実行するにはどうすればよいですか?
以下の一連のforループをよりコンパクトなコードに縮小するにはどうすればよいですか?
一連の同様の行をforループに変換するにはどうすればよいですか?
djangoのforループで別のURLを繰り返し処理する
Djangoテンプレートでforループを実行するには?
forループを並べて実行するにはどうすればよいですか?
forループは別のforループ内にネストされるまで動作し、NA値を繰り返します
C ++で繰り返しUntilループを作成するにはどうすればよいですか?
この再帰コードをNodeJS/Javascriptのwhile/forループを使用して繰り返しコードとして記述できますか
Rating