我想為所有這些卡片敬酒。但它只顯示第一張卡。我附上了我的頁面視圖，如果用戶未登錄，我想在其中添加 Toast 訊息以查看卡的詳細資訊。我對 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>uj5u.com熱心網友回復：
所以這里你的問題來自 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/395446.html
標籤：javascript html 姜戈 循环 吐司