Question

我建立了一个显示基本数据（字符串）的网站，这是我从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显示一个只有该卡的网站，但这很麻烦，无法在移动设备上正确显示。

我尝试的另一件事是在表格中显示数据，但是当有多个固定行时我不确定如何显示它。

感谢您的帮助！

Answer 1

您可以使用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();

如何在静态网站中重用html / css / javascript？

1 个答案: