forEach link 从 Firestore 中获取时未显示为可点击

Question

我有一个 forEach，它将显示来自 firestore 的一行徽标。我希望这些可以通过 url 进行点击，url 和徽标将在同一个文档中。

我能够获取并显示所有徽标，但它们不可点击。

这是我用来让 foreach 显示徽标的代码。

const i = query(collection(db, "built"));
        const unsubscribe = onSnapshot(i, (querySnapshot) => {
            const team = document.querySelector('.built');

            querySnapshot.forEach((doc) => {
                const docData = doc.data();
                const teams = team.appendChild(document.createElement('built'));
                teams.innerHTML = `
                <a href="">
                <img class="logo">
                    <a/>
            `;
            teams.children[0].href = docData.url;
            teams.children[1].src = docData.logo;

                console.log("Current data: ", docData);
            });
        });

如何将 url 创建为 link，并使每个徽标都可点击？

Answer 1

querySnapshot.forEach((doc) => {
    const docData = doc.data();
    team.innerHTML += `
      <a href="${docData.url}">
        <img src="${docData.logo}" class="logo" />
      </a>
    `;
});

或使用 document.createElement 和徽标 div 包装纸

querySnapshot.forEach((doc) => {
  const docData = doc.data();
  const link = document.createElement('a');
  const logo = document.createElement('img');
  logo.src = docData.logo;

  const logoWrapper = document.createElement('div');
  logoWrapper.classList.add('logo');
  link.href = docData.url;
  logoWrapper.appendChild(logo);
  link.appendChild(logoWrapper);
  team.appendChild(link);
});

Answer 2

我注意到一些事情，不确定这是否导致您的 link 不可点击问题。

'/>' 而不是图像结束标记的 '>' 和 '</a>' 而不是锚标记的 '<a/>'。

尝试

<a href="">
   <img class="logo" />
</a>

forEach link 从 Firestore 中获取时未显示为可点击

forEach link not appearing as clickable when fetching from Firestore

html

javascript

foreach

google-cloud-firestore