db.collection('Buses').get().then((snapshot) = > { snapshot.forEach((busDatas) = > { busData = busDatas.data() console.log(busData) document.getElementById('bus-container-dynamic').innerHTML = `<div class="single-room-area d-flex align-items-center mb-50 wow fadeInUp" data-wow-delay="100ms"> <div class="room-thumbnail"> <img src="${busData.ImageLink}" alt=""> </div> <div class="room-content"> <h2>${busData.TourName}</h2> <h6>${busData.From} to ${busData.To}</h6> <h4>? ${busData.SeatPrice} </h4> <div class="room-feature"> <h6>Boarding Point <span>${busData.BoardingTime}</span></h6> <h6>Dropping Point <span>${busData.DroppingTime}</span></h6> <h6>Seats Left <span>${busData.SeatsLeft}</span></h6> <h6>Total Time <span>${busData.TotalTime}</span></h6> </div> <a href="#" class="btn view-detail-btn"> View Details <i class="fa fa-long-arrow-right" aria-hidden="true"></i> </a> </div> </div>`})})我正在使用此代碼在 html 中顯示我的代碼，但網頁上僅顯示一個文檔，但是當我在控制臺中打印該數據時，我得到了所有文檔
1 回答
qq_笑_17
TA貢獻1818條經驗 獲得超7個贊
不要在每次迭代時覆蓋元素的內容，而是附加到它們。
事實上，使用一個變量來追加，然后將其分配給元素，這樣您只需操作 DOM 一次。
這行：
document.getElementById('bus-container-dynamic').innerHTML = `...`;在每次迭代中不斷重寫整個內容。#bus-container-dynamic
您可以將所有數據存儲在一個變量中，然后將其分配給元素。
一個簡短的片段來說明解決方案。
const myData = [1,2,3,4,5];
// Create a variable here
let html = '';
myData.forEach( e => {
// Create your element's HTML inside the loop
html += e;
});
// Then assign it to the element
document.getElementById('my-element').innerHTML = html;
<div id="my-element"></div>
這就是我修改您最初發布的代碼的方式。
db.collection('Buses').get().then((snapshot) = > {
let html = '';
snapshot.forEach((busDatas) = > {
busData = busDatas.data()
console.log(busData)
html += `
<div class="single-room-area d-flex align-items-center
mb-50 wow fadeInUp" data-wow-delay="100ms">
<div class="room-thumbnail">
<img src="${busData.ImageLink}" alt="">
</div>
<div class="room-content">
<h2>${busData.TourName}</h2>
<h6>${busData.From} to ${busData.To}</h6>
<h4>? ${busData.SeatPrice} </h4>
<div class="room-feature">
<h6>Boarding Point <span>${busData.BoardingTime}</span></h6>
<h6>Dropping Point <span>${busData.DroppingTime}</span></h6>
<h6>Seats Left <span>${busData.SeatsLeft}</span></h6>
<h6>Total Time <span>${busData.TotalTime}</span></h6>
</div>
<a href="#" class="btn view-detail-btn">
View Details
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>`
document.getElementById('bus-container-dynamic').innerHTML = html;
}) // End foreach
}) // End then
- 1 回答
- 0 關注
- 99 瀏覽
添加回答
舉報
0/150
提交
取消