Django模板循环仅首个订单弹窗生效问题求助

问题根源 #

HTML 要求页面内的 id 属性必须唯一，你在 {% for %} 循环里给所有按钮和弹窗都用了相同的 id="myBtn" 和 id="myModal"。当 JavaScript 按 ID 查找元素时，只会返回第一个匹配的元素，这就是只有第一个订单按钮能触发弹窗的原因。

修复方案 #

1. 修改模板代码，生成唯一ID #

把按钮和弹窗的ID改成与订单ID绑定的动态值，确保每个元素ID唯一：

<h3 style="color: #0457ae;padding-left: 40px;"><u>YOUR ORDERS</u></h3>
{% for order in orders %}
    <p>Order total: ${{order.total}}</p>
    <p>Status: Paid</p>
    <p>Transaction id/tracking number :<span id="trans_id-{{order.id}}">&nbsp;{{order.transaction_id}}</span></p>
    <!-- 用订单ID生成唯一按钮ID -->
    <button id="myBtn-{{order.id}}" class="btn btn-outline-primary">more details</button>
    <!-- 用订单ID生成唯一弹窗ID -->
    <div id="myModal-{{order.id}}" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
            <!-- 关闭按钮绑定对应订单的弹窗ID -->
            <span class="close" data-modal-id="{{order.id}}">&times;</span>
            <center><u>More order details</u></center>
            <p>shipping to :{{order.shipping}}</p>
            <p>Estimated delivery: {{order.delivery}}</p>
            <p>phone: {{order.phone}}</p>
        </div>
    </div>
{% endfor %}

2. 调整JavaScript代码，关联对应弹窗 #

替换原来的JS逻辑，让每个按钮对应自己的弹窗：

// 获取所有订单详情按钮
const buttons = document.querySelectorAll('[id^="myBtn-"]');
// 获取所有弹窗关闭按钮
const closeButtons = document.querySelectorAll('.close');

// 绑定按钮点击事件
buttons.forEach(button => {
    const orderId = button.id.split('-')[1];
    const modal = document.getElementById(`myModal-${orderId}`);
    
    button.onclick = function() {
        modal.style.display = "block";
    }
});

// 绑定关闭按钮事件
closeButtons.forEach(btn => {
    const orderId = btn.getAttribute('data-modal-id');
    const modal = document.getElementById(`myModal-${orderId}`);
    
    btn.onclick = function() {
        modal.style.display = "none";
    }
});

// 点击弹窗外部关闭弹窗
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
        event.target.style.display = "none";
    }
}

简化方案（如果用Bootstrap） #

如果你的项目引入了Bootstrap，可以直接利用它的Modal组件，不用自己写JS：

<h3 style="color: #0457ae;padding-left: 40px;"><u>YOUR ORDERS</u></h3>
{% for order in orders %}
    <p>Order total: ${{order.total}}</p>
    <p>Status: Paid</p>
    <p>Transaction id/tracking number :<span id="trans_id-{{order.id}}">&nbsp;{{order.transaction_id}}</span></p>
    <!-- 用data属性绑定对应弹窗 -->
    <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#myModal-{{order.id}}">more details</button>
    <!-- 弹窗保持动态ID -->
    <div id="myModal-{{order.id}}" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><u>More order details</u></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>shipping to :{{order.shipping}}</p>
                    <p>Estimated delivery: {{order.delivery}}</p>
                    <p>phone: {{order.phone}}</p>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

内容的提问来源于stack exchange，提问作者Chuzuzo Sedrick