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を上書きすることを拒否しているため、何とか複製される可能性があります。私が間違っていることと、これを達成する方法を教えてください。
ありがとう。
PRMoureuはすでにコメントで言っているように:あなたは本当にあなたのIDを正しく取得する必要があります。 テンプレート内で forloop.counter 変数を使用して、1から始まる現在の反復番号を取得できます。その変数を次のようにIDに追加します。
<div id=”carSpeedBar{{forloop.counter}}”>
2つ目は、複数の車を処理できるように、JavaScriptを一般化することです。 スニペットをパラメータとしてcar idをとり、ハードコードされたIDをこのパラメータに従って動的に調整する関数にラップします
function animateCarSpeed(var id) {
var bar = $(‘#carSpeedBar’ + id);
//…
}
最後に、新しい一般化されたJavaScript関数を呼び出す必要があります。 JavaScriptをインクルードする方法に応じて、JavaScriptファイル内、テンプレートループ内の新しいscript要素、またはテンプレートの最後に関数を呼び出します。
source
