我建立了一个网站,以材料设计卡的形式显示从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/

10-09 15:27
查看更多