Django：显示不同值的对象属性

Question

所以这看起来像很多代码，但我只关心我放置箭头的那两行。

此代码 sn-p 来自模板 (html) 文件。

solutions_newest 是一个充满“解决方案”对象的数组。 “解决方案”具有称为“id”的属性。 {{ solution.id }} 访问解决方案的 id。

我放置箭头的两行在同一个 for 循环中，因此它应该在给定时间访问相同的解决方案。但是，当我在这两行中显示 {{ solution.id }} 时，第一行显示所选拼图的 id，第二行始终显示“解决方案”数组的第一个拼图的 id。

这怎么可能？

我怀疑我没有完全理解 Bootstrap 模态的工作原理，但老实说，我不知道为什么 {{ solution.id }} 在带箭头的两行中显示不同的 id。

            {% for solution in solutions_newest %}
        <div class="card bg-light">
            <div class="card-header subtitle">
                <div class="triple-left">{{ solution.datetime }} by
                    <a href="{% url 'profile' username=solution.user.username %}">{{ solution.user.username }}</a>
                </div>
                {% if user == solution.user or user.profile.teacher %}
                <div class="triple-right">
                    <a href="{% url 'edit_solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">edit</a>
                    &nbsp;&nbsp;
    --------------> <a class="text-danger" href="#" data-toggle="modal" data-target="#deleteSolutionNewest">{{ solution.id }}: delete</a>

                    <!-- Modal -->
                    <div class="modal fade" id="deleteSolutionNewest" tabindex="-1" role="dialog" aria-labelledby="deleteSolutionNewestLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                <h5 class="modal-title" id="deleteSolutionNewestLabel">Are you sure?</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                </div>
                                <div class="modal-body">
                                Once you delete a solution, you lose it forever.
                                </div>
                                <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                --------------> <a href="{% url 'delete_solution' puzzleID=solution.puzzle.id solutionID=solution.id %}" class="btn btn-danger">{{ solution.id }}: Delete</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                {% endif %}
                <div class="triple-center points">
                    <a class="block-link" href="{% url 'solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">&uArr;</a>
                    &nbsp;&nbsp; {{ solution.points }} &nbsp;&nbsp;
                    <a class="block-link" href="{% url 'solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">&dArr;</a>
                </div>
            </div>
            <a class="block-link" href="{% url 'solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">
                <div class="card-body">
                    <h5 class="card-title">{{ solution.title }}</h5>
                    <p class="card-text">{{ solution.content | markdown | safe }}</p>
                </div>
            </a>
        </div>
        <br>
        {% endfor %}

感谢任何帮助。谢谢！

Answer 1

在 HTML 元素 ID 中应该在整个文档中是唯一的。我怀疑这个问题是由多个具有相同 ID 的对象引起的，因为在你的 for 循环中有一个带有 id="deleteSolutionNewestLabel" 的标签会导致多个带有 id deleteSolutionNewestLabel 的标签。

html 5.1 spec 表示 getElementById 必须返回具有给定 ID 的第一个元素，因此您看到的行为并不意外。大多数（如果不是全部）浏览器在调用 getElementById 时已经并且仍然选择具有给定 ID 的第一个元素。大多数通过 ID 查找元素的库都继承了这种行为。勾选“Can multiple different HTML elements have the same ID if they're different elements?”

尝试用id="deleteSolutionNewestLabel-{{ forloop.counter }}" 替换所有id="deleteSolutionNewestLabel" 实例，如果它解决了问题，请告诉我。