如何识别未显示的模板文字模态的错误？

Question

最近我从这里的一位非常友好的用户那里得到了关于包含模态的模板文字库的帮助。

我做的例子已经修复，运行良好。

问题是，当我将代码传递给实际项目时，模态框不会显示。使用简单的函数 classList.toggle（带有显示块的 class）激活模式。

这里我post一些js代码为了更好的理解

function galTemplate(oriGall){
    return `
    <div class="gallery-entry" id="${oriGall.imagen}-btn">
        <a href=""><img src="imgs/gallery/${oriGall.imagen}.jpg"></a>
        <p class="gallery-entry-titulo">${oriGall.titulo}</p>
    </div>
    `
}

function galModal(oriGall){
    return `
    <iframe class="popup-bg" id="${oriGall.imagen}-modal" src="imgs/gallery/${oriGall.titulo}/${oriGall.imagen}.html" frameborder="0""></iframe>
    `
}

function addClickListeners(oriGall) {
    let btnId = oriGall.imagen + '-btn';
    let modalId = oriGall.imagen + '-modal';
    let elBtn = document.getElementById(btnId);
    let elModal = document.getElementById(modalId);
    elBtn.onclick = function() {
      console.log('click: btn: ' + this.id + ', modal: ' + elModal.id);
      elModal.classList.toggle('show-popup');
    }
    /* to dispose the popup on click */
    elModal.onclick = function() {
      this.classList.toggle('show-popup');
    }
    /* --- */
  }

document.getElementById("origami-gallery-grid").innerHTML = `
  <div class="gallery-grid">
    ${ORIGAMI_GALLERY.map(galTemplate).join("")}
  </div>
  ${ORIGAMI_GALLERY.map(galModal).join("")}
`;
ORIGAMI_GALLERY.map(addClickListeners);

这适用于看起来像这样的数组（但有更多对象）

const ORIGAMI_GALLERY = [
    {
        imagen: "origami-gallery-img-001",
        titulo: "Rencito"
    },
    {
        imagen: "origami-gallery-img-002",
        titulo: "Taski"
    }
];

真不知道bug在哪里。在这个例子中，只处理了 0 个问题。我想这可能是因为我在 iframe 中使用了外部 HTML，但在 Codepen 中测试并没有问题。所以我不知道发生了什么。我错过的那件事是什么？请帮忙！

Answer 1

好吧，这是一个愚蠢的错误。我使用“a”标签来标记模态按钮，这导致页面重新加载。所以我把它改成了 div

function galTemplate(oriGall){
    return `
    <div class="gallery-entry" id="${oriGall.imagen}-btn">
        <div><img src="imgs/gallery/${oriGall.imagen}.jpg"></div>
        <p class="gallery-entry-titulo">${oriGall.titulo}</p>
    </div>
    `
}

如何识别未显示的模板文字模态的错误？

How can I identify the error of a template literals modal that isn't showing?

javascript

iframe

modal-dialog

popup

template-literals