Django循环中模态框标题无法动态匹配对应商品问题求助

问题根源 #

你遇到的问题是所有模态框的ID都是exampleModal，Bootstrap触发模态框时只会匹配页面中第一个拥有该ID的元素，所以无论点击哪个披萨卡片的按钮，弹出的都是第一个披萨对应的模态框，标题自然显示第一个披萨的名称。

解决方案 #

给每个循环生成的模态框设置唯一ID，同时让对应按钮的data-bs-target指向这个唯一ID，确保点击按钮时触发的是当前披萨对应的模态框。

修正后的模板代码 #

<div class="row row-cols-1 row-cols-md-4 g-4 mb-4">
  {% for pizza in pizzas %}
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">{{pizza.name|title}}</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer d-flex justify-content-between">
        <!-- 按钮的data-bs-target指向当前披萨的唯一模态框ID -->
        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#pizza-{{pizza.pk}}-modal">Customize</button>
        
        <!-- 模态框ID使用披萨的pk生成唯一值 -->
        <div class="modal fade" id="pizza-{{pizza.pk}}-modal" tabindex="-1" aria-labelledby="pizza-{{pizza.pk}}-modal-label" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="pizza-{{pizza.pk}}-modal-label">{{pizza.name|title}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1-{{pizza.pk}}">
                  <label class="form-check-label" for="defaultCheck1-{{pizza.pk}}">
                    Default checkbox
                  </label>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning">Add to cart</button>
              </div> 
            </div>
          </div>
        </div>

        <small class="fw-bold">${{pizza.price}}</small>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

额外说明 #

1. 把原来的<a>标签改成<button>更合理，因为这里不需要跳转链接，只是触发模态框；如果需要保留跳转功能，可以保留<a>但改用JS处理逻辑。
2. 补全了模板中缺失的闭合标签，避免DOM结构错误导致的其他问题。
3. 模态框的aria-labelledby属性也对应修改为唯一值，符合无障碍访问规范。

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