我在 Flask 應用程序中建立了一個畫廊。出于加載目的，網頁會加載縮略圖。我正在嘗試使用 Javascript 來允許用戶單擊縮略圖并查看完整圖像。我遇到的問題是 javascript 似乎只適用于<div id="image_con"></div>. 如何讓該函數適用于 div 的所有實例？或者這甚至可能與我設置事物的方式有關嗎？HTML：{% block content %}{% for x in names %}<div class="date_con">    <h2>{{ x }}</h2>    {% for y in names[x] %}    <div class="event_con">        <span class="event_data">{{ y['date_parsed'] }}</span>        <span class="event_data">{{ y['title'] }}</span>    </div>    <div class="image_con" id="image_con">        {% for w in y['thumbs'] %}        <img class="image_small" src="{{ url_for('static', filename='thumbnails/' + w + '')}}" alt="{{ y['id'] }}">        {% endfor %}    </div>    <div class="cover" id="{{ y['id'] }}">        {% for z in y['fulls'] %}        <img class="image_big" id="{{ z }}" style="display: none;" onclick="EventHandler(this.id)"            src="{{ url_for('static', filename='gallery/' + z + '')}}" alt="error">        {% endfor %}    </div>    {% endfor %}</div>{% endfor %}{% endblock content %}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);};