我如何识别没有显示的模板文字模式的错误？

Question

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

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

问题是，当我将代码传递给实际的项目时，模态不会显示。通过一个简单的函数classList.toggle(一个带有显示块的类)激活模态。

为了更好地理解，我在这里发布了一些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>
    `
}