Javascript照片库--查看完整图像

我已经在烧瓶应用程序中建立了一个图库。出于加载目的，该网页加载缩略图图像。我正在尝试使用Javascript来允许用户单击缩略图并查看完整图像。我遇到的问题是javascript似乎只适用于

的第一个实例。如何使函数适用于div的所有实例？或者，这是可能的方式，我有东西设置

HTML:

var hit = false,
image_small = document.getElementById('image_con'),
active = null;

image_small.onclick = function (e) {
    var i = 0, tgt = e.target, items;
    if (tgt === this) return;
    items = children(image_small);
    var id = tgt.getAttribute('alt');
    console.log(id);
    while (tgt.parentNode !== this) tgt = tgt.parentNode;
    while (items[i] !== tgt) i++;
    // activate the image
    var tar = document.getElementById(id).children;
    tar[i].style.display = 'block';
    document.getElementById(id).style.display = 'block';
    output('index : ' + i);
    // helpers
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    document.getElementsByClassName('cover')[0].style.display = 'flex';
};

function children(el) {
    var i = 0, children = [], child;
    while (child = el.childNodes[i++]) {
        if (child.nodeType === 1) children.push(child);
    }
    return children;
};

function output(s) {
    console.log(s);
};

function EventHandler(e) {
    console.log('id = ' + e);
    document.getElementById(e).style.display = 'none';
    document.getElementsByTagName('body')[0].style.overflow = 'auto';
    document.getElementsByClassName('cover')[0].style.display = 'none';
};

{%block content%}
{名称%%中的x的百分比}
{{x}
{%y的名称为[x]}
{{y['date_parsed']}
{{y['title']}
{y['thumbs']%中w的%s}
{%endfor%}
{y['fulls']%中z的百分比}
{%endfor%}
{%endfor%}
{%endfor%}
{%endblock内容%}

Javascript:

var hit = false,
image_small = document.getElementById('image_con'),
active = null;

image_small.onclick = function (e) {
    var i = 0, tgt = e.target, items;
    if (tgt === this) return;
    items = children(image_small);
    var id = tgt.getAttribute('alt');
    console.log(id);
    while (tgt.parentNode !== this) tgt = tgt.parentNode;
    while (items[i] !== tgt) i++;
    // activate the image
    var tar = document.getElementById(id).children;
    tar[i].style.display = 'block';
    document.getElementById(id).style.display = 'block';
    output('index : ' + i);
    // helpers
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    document.getElementsByClassName('cover')[0].style.display = 'flex';
};

function children(el) {
    var i = 0, children = [], child;
    while (child = el.childNodes[i++]) {
        if (child.nodeType === 1) children.push(child);
    }
    return children;
};

function output(s) {
    console.log(s);
};

function EventHandler(e) {
    console.log('id = ' + e);
    document.getElementById(e).style.display = 'none';
    document.getElementsByTagName('body')[0].style.overflow = 'auto';
    document.getElementsByClassName('cover')[0].style.display = 'none';
};

---

要确保每个图像都有一个侦听器，请尝试向父级添加一个侦听器，

image\u-con

，而不是每个图像

document.getElementById('image_con').addEventListener('click', event => {
    const { target } = event;
    if (target.classList.contains('image_small')) {
        /**
         * the rest of the click handler goes here
         */
    }
});

---

请注意这个

与Document.querySelector（）和Document.querySelectorAll（）等其他元素查找方法不同，getElementById（）仅作为全局文档对象的方法可用，不作为DOM中所有元素对象的方法可用。

---

因此，我建议您使用className而不是ID。 比如说,

document.querySelectorAll('.image_con').forEach(function(item){
  item.onclick = function(e){
    /* Your codes here... */
  }
})

---

我使用文件名作为每个图像的

id

，并且能够使用更简单的Javascript函数

HTML：

{%block content%}
{名称%%中的x的百分比}
{{x}
{%y的名称为[x]}
{{y['date_parsed']}
{{y['title']}
{%w，z在zip中（y['thumbs']，y['fulls']）%}
{%endfor%}
{y['fulls']%中z的百分比}
{%endfor%}
{%endfor%}
{%endfor%}

Javascript：

函数视图（tar，e）{
document.getElementById（e）.style.display='block'
document.getElementById（tar.style.display='block'；
document.getElementsByTagName（'body'）[0].style.overflow='hidden'；
document.getElementsByClassName（'cover'）[0].style.display='flex'；
};
函数EventHandler（e）{
document.getElementById（e.style.display='none'；
document.getElementsByTagName（'body'）[0].style.overflow='auto'；
document.getElementsByClassName（'cover'）[0].style.display='none'；
};