从 Firestore 获取时，forEach 链接未显示为可点击答案

【问题标题】：forEach link not appearing as clickable when fetching from Firestore从 Firestore 获取时，forEach 链接未显示为可点击
【发布时间】：2022-01-11 15:21:14
【问题描述】：

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

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

这是我用来让 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，并使每个徽标都可点击？

【问题讨论】：

为什么不在循环中设置？
我该怎么做？

标签： javascript html google-cloud-firestore foreach

【解决方案1】：

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

或使用 document.createElement 和 logo 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);
});

【讨论】：

哈哈是的对不起

这对我来说并没有只显示徽标所在的空间，但是如果我取出链接，则徽标会显示

您的链接没有样式？您的网址中没有禁止字符？

第二个正是我想要的，并且正在做我想做的。但现在“标志”类不是他们的我已经失去了造型。我尝试在成本日志部分之后添加图像部分和 style.width..display.. 类。我将如何重新添加其唯一边距、高度和显示的样式？

或 logo.classList.add('logo');或者将 img 包装在

我编辑代码

【解决方案2】：

我注意到一些事情，不确定这是否会导致您的链接无法点击。

'/>' 代替 '>' 用于图像结束标记和 '</a>' 而不是 '<a/>' 作为锚标记。

试试

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

【讨论】：

糟糕！谢谢一定错过了。