Django:在HTML/Javascript中索引列表时选择不同的div

Question

我有两个div，它们通过相同的javascript函数在dislpay:none和display:inline之间切换。但是，这是正常工作的，但是，我也希望根据传递给javascript函数的内容，在某个整数值上对outliers_data列表进行索引。我不知道如何最好地完成这项任务。这是我的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>

我希望{% for val, name in outliers_data %}成为类似于{% for val, name in outliers_data.index %}的东西，但我目前的结构似乎错了。

谢谢

Answer 1

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

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

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

Answer 2

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

<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个参数。