我正在使用Django模板循环遍历hp_tracker对象。每个hp_tracker都有自己的js代码，用于通过ajax更改值。我几乎可以确定应该将此代码放在.js文件中，但我没有找到一种在.js文件中无法访问Django模板变量的情况下唯一选择每个hp_tracker的方法。所以...我将js移到了html模板本身。我知道这无疑会产生巨大的安全隐患，我也愿意讨论这些问题。
无论如何，进入我的问题。我的js失败了，因为我声明了不唯一的全局变量！它们被用来控制一些计数器和setTimeout，我不知道如何使用它们来做我想做的事情。
因此，for循环尝试一遍又一遍地重新声明相同的变量。在脚本的其余部分中，我正在使用JQuery，它非常乐意使用Django变量{{ hp_tracker.id }}，但是JavaScript不行，因为对象ID中的"-"字符不允许作为变量名。
我应该怎么解决这个混乱的问题？有没有办法在不使用全局变量的情况下运行我的代码？我能否在不使用对象id的情况下标识我的for循环中的对象？
<div id="ToolSessionPageWrapper">
<div class="tool-session-page-header">
<div id=OpenToolSelectionMenuBtn class="arrow-down"></div>
</div>
<div class="tool-session-page-body">
<div id="HpTrackersViewWrapper" class="tool-body">
{% for hp_tracker in hp_trackers %}
<div class="hp-tracker-box">
<div id="{{hp_tracker.id}}-HpTrackerTitle" class="hp-tracker-title">{{ hp_tracker.title }}</div>
<br />
<form method="POST" action="{% url 'hp_change_value' hp_tracker.id %}" id="{{ hp_tracker.id }}-HpValueForm">
{% csrf_token %}
<div class="hp-control-box">
<button type="button" id="{{ hp_tracker.id }}-HpValueDecreaseBtn" class="hp-value-change-btn decrease">-</button>
<div id="{{hp_tracker.id}}-HpValue" class="hp-value">{{ hp_tracker.hp_value }}</div>
<div id="{{ hp_tracker.id }}-HpValueInput">{{ hp_change_value_form.hp_value }}</div>
<div id="{{ hp_tracker.id }}-HpChangeValueCover" class="hp-value hp-change-value-cover"></div>
<div id="{{ hp_tracker.id }}-HpChangeValue" class="hp-value hp-change-value"></div>
<button type="button" id="{{ hp_tracker.id }}-HpValueIncreaseBtn" class="hp-value-change-btn increase">+</button>
</div>
</form>
</div>
<script>
{#ajax call for HpValueForm#}
function changeHpValue(form) {
'use strict';
$(form).submit(function (e) {
// preventing from page reload and default actions
e.preventDefault();
// serialize the form data.
let serializedData = $(form).serialize();
// make POST ajax call
$.ajax({
type: 'POST',
url: '{% url 'hp_change_value' hp_tracker.id %}',
data: serializedData,
success: function (response) {
let form_instance = JSON.parse(response['form_instance']);
let fields = form_instance[0]['fields'];
$('#{{hp_tracker.id}}-HpValue').empty().prepend(fields.hp_value);
console.log('ajaxSuccess');
},
error: function (response) {
console.log(response["responseJSON"]["error"]);
}
});
});
}
{#control timeout before hp_value increase or decrease is submitted#}
let {{ hp_tracker.id|escapejs }}hp_add_subtract_value = $('#{{hp_tracker.id}}-HpValue').text(),
hp_change_value = 0,
timeoutHandler;
function timeoutControl() {
clearTimeout(timeoutHandler);
timeoutHandler = setTimeout(function () {
$('#{{ hp_tracker.id }}-HpValueInput input').val(hp_add_subtract_value);
$('#{{ hp_tracker.id }}-HpValueForm').submit();
$('#{{hp_tracker.id}}-HpChangeValue').css({'display': 'none'});
$('#{{hp_tracker.id}}-HpChangeValueCover').css({'display': 'none'});
hp_change_value = 0;
$('#{{hp_tracker.id}}-HpChangeValue').empty().prepend(hp_change_value);
}, 2000);
}
{#increase the hp value#}
$('#{{ hp_tracker.id }}-HpValueIncreaseBtn').click(function (e) {
'use strict';
hp_add_subtract_value++;
hp_change_value++;
$('#{{hp_tracker.id}}-HpChangeValue').css({'display': 'inline'});
$('#{{hp_tracker.id}}-HpChangeValueCover').css({'display': 'inline'});
$('#{{hp_tracker.id}}-HpChangeValue').empty().prepend(hp_change_value);
timeoutControl();
});
{#decrease the hp value#}
$('#{{ hp_tracker.id }}-HpValueDecreaseBtn').click(function (e) {
'use strict';
hp_add_subtract_value--;
hp_change_value--;
$('#{{hp_tracker.id}}-HpChangeValue').css({'display': 'inline'});
$('#{{hp_tracker.id}}-HpChangeValueCover').css({'display': 'inline'});
$('#{{hp_tracker.id}}-HpChangeValue').empty().prepend(hp_change_value);
timeoutControl();
});
{#submit HpValueForm#}
$('#{{ hp_tracker.id }}-HpValueForm').on('submit', changeHpValue('#{{ hp_tracker.id }}-HpValueForm'));
</script>
{% endfor %}
</div>
</div>
{% for的文档。您可以使用{{ forloop.counter }}之类的内容来获取当前循环索引。这应该有助于您创建唯一的名称 - https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#for - markwalker_