Django:选择不同的div，同时索引一个内部的列表，HTML/Javascript

Question

>我有两个div，通过同一个javascript函数在dislpay：none和display：inline之间切换。这是正常工作的，但是，我还想根据传递给 javascript 函数的内容在某个整数值处索引outliers_data列表。我不确定如何最好地完成这项任务。这是我的网页：

<div id="outlier_list" style="display: inline">
<label style="text-decoration: underline; font-size: 24px;">Outliers</label><br>
{% for val, name in outliers %}
<label onclick="swapOutlierContent({{ forloop.counter }})" style="font-weight: bold; cursor: pointer;">{{ val }} </label>
<label style="font-style: italic;">{{ name }}</label><br>
{% endfor %}
</div>
<div id="outlier_data" style="display: none;">
<label style="text-decoration: underline; font-size: 24px;">Outlier In-Depth</label><br>
{% for val, name in outliers_data %}
<label onclick="swapOutlierContent({{ forloop.counter }})" style="font-weight: bold; cursor: pointer;">{{ val }} </label>
<label style="font-style: italic;">{{ name }}</label><br>
{% endfor %}
</div>
<script>
function swapOutlierContent(outlier_id) {
outlier_list = document.getElementById('outlier_list');
outlier_data = document.getElementById('outlier_data');
if (outlier_list.style.display == 'inline'){
outlier_list.style.display = 'none'
}
else {
outlier_list.style.display = 'inline'
}
if (outlier_data.style.display == 'inline'){
outlier_data.style.display = 'none'
}
else {
outlier_data.style.display = 'inline'
}
}
</script>

我希望{% for val, name in outliers_data %}变成类似{% for val, name in outliers_data.index %}，但我目前的结构似乎不对。

谢谢

Answer 1

我们将在所有元素中添加一个公共类。

<div id="outlier_list" class="outliers" style="display: inline">
<label style="text-decoration: underline; font-size: 24px;">Outliers</label><br>
{% for val, name in outliers %}
<label onclick="swapOutlierContent({{ forloop.counter }})" style="font-weight: bold; cursor: pointer;">{{ val }} </label>
<label style="font-style: italic;">{{ name }}</label><br>
{% endfor %}
</div>
<div id="outlier_data" class="outliers" style="display: none;">
<label style="text-decoration: underline; font-size: 24px;">Outlier In-Depth</label><br>
{% for val, name in outliers_data %}
<label onclick="swapOutlierContent({{ forloop.counter }})" style="font-weight: bold; cursor: pointer;">{{ val }} </label>
<label style="font-style: italic;">{{ name }}</label><br>
{% endfor %}
</div>
<div id="outlier_data_index" class="outliers" style="display: none;">
<label style="text-decoration: underline; font-size: 24px;">Outlier In-Depth</label><br>
{% for val, name in outliers_data.index %}
<label onclick="swapOutlierContent({{ forloop.counter }})" style="font-weight: bold; cursor: pointer;">{{ val }} </label>
<label style="font-style: italic;">{{ name }}</label><br>
{% endfor %}
</div>

每当调用该函数时，我们首先使用公共类隐藏所有元素，然后我们显示合适的元素。

(我使用jQuery，因为我发现它更容易，如果你愿意，这也可以在javascript中完成，但需要更多代码(

<script>
function swapOutlierContent(outlier_id) {
$(".outliers").css('display','none');
if (outlier_id === 1){
$("#outlier_list).css('display','inline')
}
else if(outlier_id === 2){
$("#outlier_data).css('display','inline')
}
else {
$("#outlier_data_index).css('display','inline')
}
}
</script>

我真的不明白为什么您将 for 循环计数器作为参数发送到函数，所以我修改了它以取要显示的div 的编号，您可以替换它或发送 2 个参数。

Answer 2

为了解决这个问题，我使用了另一个 Django 模板循环，根据 outliers_list 的列表长度创建了动态数量的异常值div。然后，我可以使用附加在末尾的forloop.counter值来引用特定的div 名称，并带有document.getElementById.然后，我添加了一个后退按钮，以便能够返回到列表视图并隐藏详细页面。

<div id="outlier_list" style="display: inline">
<label style="text-decoration: underline; font-size: 24px;">Outliers</label><br>
{% for val, name in outliers %}
<label onclick="swapToOutlierContent({{ forloop.counter }})" style="font-weight: bold; cursor: pointer;">{{ val }} </label>
<label style="font-style: italic;">{{ name }}</label><br>
{% endfor %}
</div>
{% for outlier in outliers_data %}
<div id="outlier_data_{{ forloop.counter }}" style="display: none;">
<label style="text-decoration: underline; font-size: 24px;">Outlier In-Depth</label><br>
{% for val, name in outlier %}
<!-- Get the parent counter -->
<label onclick="swapOutlierContent({{ forloop.parentloop.counter }})" style="font-weight: bold; cursor: pointer;">{{ val }} </label>
<label style="font-style: italic;">{{ name }}</label><br>
{% endfor %}
<input type="button" onclick="swapToOutlierList({{ forloop.counter }})">
</div>
{% endfor %}
<script>
function swapToOutlierContent(outlier_id) {
outlier_list_div = document.getElementById('outlier_list');
outlier_data_div = document.getElementById('outlier_data_' + outlier_id);
outlier_list_div.style.display = 'none';
outlier_data_div.style.display = 'inline';
}
function swapToOutlierList(outlier_id) {
outlier_list_div = document.getElementById('outlier_list');
outlier_data_div = document.getElementById('outlier_data_' + outlier_id);
outlier_list_div.style.display = 'inline';
outlier_data_div.style.display = 'none';
}
</script>

这可能不是最好或最有效的方法，但它完成了我想要做的事情。