在 Django bootstrap 项目中，显示循环元素中第一张卡片的吐司消息

Question

我想为所有这些卡片祝酒消息。但它仅针对第一张卡片显示。我附上了我的页面视图，如果用户未登录，我想在其中添加吐司消息以查看卡的详细信息。我是 Django 和 Javascript 的菜鸟。这是我大学项目的一小部分。

我的页面是这样的：https://i.stack.imgur.com/cYSPW.jpg

document.getElementById("toastbtn").onclick = function() {
  
    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
    var toastList = toastElList.map(function(toastEl) {
      
      return new bootstrap.Toast(toastEl)
    })
    toastList.forEach(toast => toast.show())
  }

<section class="details-card">

            <div class="container">
                <div class="row">
                    {% for homes in home %}
                    <div class="col-md-4 mb-4">
                        <div class="card-content">
                            <div class="card-img">
                                <img src="{{ homes.coverImg.url }}" alt="Cover Image">
                                <span><h4>{{ homes.pricePerMonth }}Taka</h4></span>
                            </div>
                            <div class="card-desc">
                                <p class="small mb-1"> <i class="fas fa-map-marker-alt mr-2"></i>{{homes.address}}</p>
                                <h3>{{ homes.title}}</h3>
                                {% if request.user.is_authenticated %}
                                <a href="{% url 'HomeDetails' homes.id %}" class="btn btn-md btn-primary hover-top">Details</a>
                                {% else %}                                                         
                                <button type="button" class="btn btn-primary" id="toastbtn">XDetails</button>
                              
                                                         
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

        </section>

        <!-- Alert Message Popup-->
          <!--bottom-0 end-0 p-3-->
          <div class="position-fixed top-50 start-50 translate-middle p-3" style="z-index: 11">
            <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <img src="({% static 'img/icon.png' %})" class="rounded me-2" alt="...">
                <strong class="me-auto">My Second Home</strong>
                <small>0.1s ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body">
                Hello!<br>You need to login first to see details.
                <div class="mt-2 pt-2 border-top">                 
                  <a class="btn btn-primary btn-sm" href="{% url 'login' %}">Sign In</a>
                  <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
                </div>
            </div>
          </div>

Answer 1

所以这里你的问题来自 id toastbtn。您已经迭代了 for 循环，卡片中的所有按钮都具有相同的 ID，但每个人的 ID 都是唯一的，因此 ID 仅添加到第一个卡片按钮。这里可以做一件事，从 btn 上的按钮和 onclick 属性中删除 toastbtn id，并将值传递给函数调用，如下所示 -

<button type="button" class="btn btn-primary" onclick="showToast()">XDetails</button>

showToast 函数与您在 js 文件中添加的函数相同 您的 JS 文件将如下所示

function showToast() {
  
    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
    var toastList = toastElList.map(function(toastEl) {
      
      return new bootstrap.Toast(toastEl)
    })
    toastList.forEach(toast => toast.show())
}

HTML 文件

<section class="details-card">

            <div class="container">
                <div class="row">
                    {% for homes in home %}
                    <div class="col-md-4 mb-4">
                        <div class="card-content">
                            <div class="card-img">
                                <img src="{{ homes.coverImg.url }}" alt="Cover Image">
                                <span><h4>{{ homes.pricePerMonth }}Taka</h4></span>
                            </div>
                            <div class="card-desc">
                                <p class="small mb-1"> <i class="fas fa-map-marker-alt mr-2"></i>{{homes.address}}</p>
                                <h3>{{ homes.title}}</h3>
                                {% if request.user.is_authenticated %}
                                <a href="{% url 'HomeDetails' homes.id %}" class="btn btn-md btn-primary hover-top">Details</a>
                                {% else %}                                                         
                                <button type="button" class="btn btn-primary" onclick="showToast()">XDetails</button>
                              
                                                         
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

        </section>

        <!-- Alert Message Popup-->
          <!--bottom-0 end-0 p-3-->
          <div class="position-fixed top-50 start-50 translate-middle p-3" style="z-index: 11">
            <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <img src="({% static 'img/icon.png' %})" class="rounded me-2" alt="...">
                <strong class="me-auto">My Second Home</strong>
                <small>0.1s ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body">
                Hello!<br>You need to login first to see details.
                <div class="mt-2 pt-2 border-top">                 
                  <a class="btn btn-primary btn-sm" href="{% url 'login' %}">Sign In</a>
                  <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
                </div>
            </div>
          </div>

在 Django bootstrap 项目中，显示循环元素中第一张卡片的吐司消息

In Django bootstrap project toast messages showing for the first card in loop element

html

javascript

django

loops

toast