Question

因此，这看起来像很多代码，但是我只真正关心放置箭头的两行。

此代码段来自模板（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"的所有实例替换为id="deleteSolutionNewestLabel-{{ forloop.counter }}"，让我知道它是否可以解决问题。

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

1 个答案: