有没有其他方法可以在不获得已作为模板呈现为 html 的未定义 onclick 的情况下显示图像？-解网

问：

我正在创建一个与使用 db.json 文件作为数据库管理书籍相关的小项目。这是一些与实际问题相关的代码

索引.html

<body>
  <ul class="books-container"></ul>
  <img src="" id="fullImage">
</body>

db.js

const container = document.querySelector('books-container')

const renderBooks = async () => {
    let uri = 'http://localhost:3000/books'

    const res = await fetch(uri)
    const books = await res.json()
    
    let template = '';
    books.forEach(book => {
        template += `
                <li class="books">
                    <img class="image" src="${book.image}" alt="${book.title}" data-image="${book.image}" width="80px" height="115px">
                    <h6 class="title">${book.title}</h6>
                </li>
        `
    })
    container.innerHTML = template
}

window.addEventListener('DOMContentLoaded', () => renderBooks())

window.addEventListener('click', (e) => {
    if(e.target.className == 'image') {
        let imageUrl = e.target.dataset.image
        document.getElementById('fullImage').setAttribute('src', imageUrl)
    }
})

这里是将图像渲染为缩略图，并将 html 页面的标题渲染为模板。我想在单击缩略图时将完整图像显示为模态图像，因此我已获取图像参考并根据单击事件显示完整图像。它工作正常并显示完整图像，但是当我单击该完整图像时，它消失了并给了我“未定义”的值。有没有其他方法可以在不点击时显示未定义的完整图像？

谢谢

javascript html dom-events 未定义引用

@dinesh盎司-> 仅通过安慰事件侦听器，我获得了图像和数据集的参考详细信息。那不是问题。当我单击缩略图时，它显示完整图像，到目前为止一切都很好。但是当我点击该特定完整图像上的任意位置时，它会消失并给我“未定义”。为什么？

答： 暂无答案

上一个：如何在Cmake中链接curses.h？

下一个：Javascript 密码生成器 - 破损的代码

有没有其他方法可以在不获得已作为模板呈现为 html 的未定义 onclick 的情况下显示图像？

Is there any other way to display image without getting undefined onclick which is already rendered as template to html?

评论