Question

我正在制作一个待办事项应用程序，其中包含2个列表：待办事项和完成项。我要为这两个列表交替使用背景色。添加项目时，一切正常。

但是，一旦我将项目＃2移至完成的列表，这就是我得到的：

我的代码如下：

HTML：

<div class = "ItemList">
    {% for todo in todos %}
    <div>
        {% if todo.complete == False %}
            <div class = "item">
                <span id="editable"> {{ todo.todoitem }} </span>
                <div class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Done" class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </div>
            </div>
        {% endif %}
    </div>
    {% endfor %}
</div>

<h3 style="text-align: center;">Completed Items</h3>
<div class = "CompletedList">
    {% for todo in todos %}
        <div>
        {% if todo.complete == True %}
            <span class = "completed">
                <strike> {{ todo.todoitem }} </strike>
                <span class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Move to Incomplete"class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </span>
            </span>
        {% endif %}
        </div>
    {% endfor %}
</div>

CSS：

div.ItemList> div:nth-of-type(odd){
    background-color: #adb6be;
}

div.ItemList> div:nth-of-type(even){
    background-color: #eaecee;
}

div.CompletedList> div:nth-of-type(odd){
    background-color: #adb6be;
}

div.CompletedList> div:nth-of-type(even){
    background-color: #eaecee;
}

如何在修改后使列表以交替的颜色显示？两个列表均应以颜色＃adb6be开头，然后交替显示。我尝试将它们包含在同一个class元素中，但这也不起作用。任何帮助将不胜感激。

Answer 1

这是由于您输出HTML的方式所致，对于每个列表，您都将生成所有项目，因此第n个子项仍将应用于DIV，即使其中没有内容也是如此。您需要调整HTML：

<div class = "ItemList">
    {% for todo in todos %}
        {% if todo.complete == False %}
            <div class = "item">
                <span id="editable"> {{ todo.todoitem }} </span>
                <div class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Done" class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>

<h3 style="text-align: center;">Completed Items</h3>
<div class = "CompletedList">
    {% for todo in todos %}
        {% if todo.complete == True %}
            <span class = "completed">
                <strike> {{ todo.todoitem }} </strike>
                <span class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Move to Incomplete"class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </span>
            </span>
        {% endif %}
    {% endfor %}
</div>

列表项的颜色交替显示的列表

1 个答案: