Django：在一个列表（HTML/Javascript）中为列表编制索引时选择不同的div

我有两个div，通过相同的javascript函数在dislpay:none和display:inline之间切换。这是正常工作的，但是，我还想根据传递到javascript函数的内容，以某个整数值为离群值_数据列表编制索引。我不知道如何最好地完成这项任务。这是我的html：

<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>

异常值

{val为%1，名称为异常值%}
{{val}}
{{name}}

{%endfor%}
深度异常值

{val的%1，异常值中的名称\u数据%}
{{val}}
{{name}}

{%endfor%}
函数swapOutlierContent（异常值_id）{
离群值列表=document.getElementById（“离群值列表”）；
outlier_data=document.getElementById（'outlier_data'）；
如果（离群值_list.style.display=='inline'）{
离群值_list.style.display='none'
}
否则{
离群值_list.style.display='inline'
}
如果（异常值_data.style.display=='inline'）{
离群值_data.style.display='none'
}
否则{
离群值_data.style.display='inline'
}
}

我希望

{%for val，name in outliers\u data%}

类似于

{%for val，name in outliers\u data.index%}

，但我当前的结构似乎不适合这种情况

---

谢谢

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

<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>

异常值

{val为%1，名称为异常值%}
{{val}}
{{name}}

{%endfor%}
深度异常值

{val的%1，异常值中的名称\u数据%}
{{val}}
{{name}}

{%endfor%}
深度异常值

{%表示val，名称在异常值中_data.index%}
{{val}}
{{name}}

{%endfor%}

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

（我使用jQuery是因为我发现它更简单，如果您需要的话，也可以用javascript完成，但只需要多一点代码）

函数swapOutlierContent（异常值_id）{
$（“.outliers”）.css（'display'，'none'）；
如果（异常值_id==1）{
$（“#异常值列表）.css（'显示'，'内联'）
}
else if（异常值_id==2）{
$（“#异常值_数据）.css（'显示'，'内联'）
}
否则{
$（“#离群值_数据_索引）.css（'display'，'inline'））
}
}

---

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

为了解决这个问题，我使用了另一个Django模板循环，根据out的列表长度创建了一个动态的异常div数量liers\u list。然后，我可以使用

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>

异常值

{val为%1，名称为异常值%}
{{val}}
{{name}}

{%endfor%}
{异常值中的异常值为%u数据%}
深度异常值

{val为%1，离群值%中的名称}
{{val}}
{{name}}

{%endfor%}
{%endfor%}
函数swapToOutlierContent（异常值\u id）{
离群值列表div=document.getElementById（“离群值列表”）；
outlier\u data\u div=document.getElementById（'outlier\u data\uDiv'+outlier\u id）；
离群值_列表_div.style.display='none'；
异常值_数据_div.style.display='inline'；
}
函数交换异常值列表（异常值\u id）{
离群值列表div=document.getElementById（“离群值列表”）；
outlier\u data\u div=document.getElementById（'outlier\u data\uDiv'+outlier\u id）；
离群值_列表_div.style.display='inline'；
异常值_数据_div.style.display='none'；
}

---

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

这可能不是最好的主意，但您是否考虑过在javascript对象中解析数据并使用它？或者可能只是创建另一个带有离群值的div\u data.index，您可以随时更改显示。@Batman我如何解析objjavascript中的ect？你的意思是传递离群值_数据对象，然后在脚本中处理它吗？我对JS很不熟悉。因为你知道在模板中使用Django变量很热，你可以简单地将值分配给变量。比如：var batman='{bruce}“我个人建议在您的项目中也包括jQuery，因为您是javascript新手，这将使您的工作更轻松！（这对我来说非常有效）谢谢！我会尝试这些东西。我很长时间都不确定在Django中使用JS或jQuery是否可以接受。我没有很好地说明我所有的想法。你的回答确实抓住了我要做的事情，但它让我提出了正确的问题。我将添加我的解决方案。使用parentloop是一个很好的选择k！很高兴你自己修好了！愿原力与你同在！

        <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>