我建立了一个网站,以材料设计卡的形式显示从Firebase Firestore获得的基本数据(字符串)。您输入代码,然后查看带有代码ID的数据。
我的问题:
目前,我只能看到一张卡片,我想再拿一张。只是重写相同的代码(具有不同的ID,...)是行不通的,因为我希望用户能够添加任意数量的卡。
<div class="card"><h4>Data1<h4/><p>Data2<p/><p>Data3<p/></div>
javascript(我没有提供完整的firebase代码)
getRealtimeUpdates = function() {
docRef.onSnapshot(function (doc) {
if (doc && doc.exists) {
const myData = doc.data();
//in here set the text like this example.innerHTML = myData.exampledata;
}
});
};
getRealtimeUpdates();
css(还有更多代码,但是它只是设置背景,字体,颜色,导航,...)
.card {
position: relative;
top: 60px;
background-color: white;
width: 95%;
margin-left: auto;
margin-right: auto;
}
我尝试使用仅通过卡片显示网站的iframe,但这变得凌乱,无法在移动设备上正确显示。
我尝试过的另一件事是在表中显示数据,但是我不确定在有多个固定行时如何显示数据。
谢谢你的帮助!
最佳答案
您可以使用JS附加html。只需添加一个将包含所有卡片的包装纸即可。
的HTML:
<div class="cards"></div>
javascript:
const cards = document.querySelector('.cards');
function cardHtml(myData) {
return `<div class="card"><p>${myData}</p></div>`;
}
getRealtimeUpdates = function() {
docRef.onSnapshot(function (doc) {
if (doc && doc.exists) {
const myData = doc.data();
cards.insertAdjacentHTML('beforeend', cardHtml(myData));
}
});
};
getRealtimeUpdates();
关于javascript - 如何在静态网站中重用html/css/javascript?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48842974/