如何使doc.id可点击项？

2024-04-29 • 问答

如何将doc.id变成可点击的项目？现在，我可以从数据库中获取数据，可以列出所有doc.id，但是我想使其成为超链接，当按下该按钮时，它将从数据库中获取数据，并将其数据显示为画布上的图形。如果说得通？

doc.id是保存在我的Firestore数据库中的东西的唯一ID。

const allDrawings = document.querySelector('#allDrawings');

function renderDrawings(doc){
    let li = document.createElement('li');
    let key = document.createElement('doc.id');

    li.setattribute('data-id',doc.id);
    key.textContent = doc.id;

    li.appendChild(key);

    allDrawings.appendChild(li);

}

db.collection('joonistused').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        renderDrawings(doc);
        console.log(doc.id);
    })
})

如果您只是想在DOM中创建锚，请尝试执行以下操作：

const anchor = document.createElement('a');
anchor.href = `/some/path/to/${doc.id}`;
anchor.innerText = `Document ID ${doc.id}`;

// <a href="/some/path/to/123">Document ID 123</a>

我相信您正在寻找的是一种设计/逻辑，用于在浏览器中列出Firestore集合中的文档并使它们列出项目。然后，您想单击一个项目，并将该文档的内容显示给用户。这将需要您端的编程逻辑。您将要编写单击链接（onclick）时调用的浏览器/客户端JavaScript。到达JavaScript代码后，您将需要通过Web客户端调用Firestore数据库以检索相应的文档。

请参阅：https://firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference.html#get

这看起来也非常有用：

Firebase Firestore Tutorial #3 - Getting Documents

如何使doc.id可点击项？

hechacn 回答：如何使doc.id可点击项？

大家都在问