Javascript lightbox不显示不同的图像

我在网上找到了一个灯箱，并将其复制到我的代码中。 第一个图像工作正常，单击以显示，然后再次单击以关闭。 但是，当你点击第二张图片时，它会再次显示第一张图片，尽管我用另一张图片替换了所有来源。我做错了什么？温柔点，我对这一切都不熟悉

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img id="gallery1" src="gallery1.jpg"></img></a></p>
        <div id="light" class="white_content1"></a> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img id="gallery1lb" src="gallery1.jpg"></img></a></div>
        <div id="fade" class="black_overlay1">
        </div>

        <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img id="gallery2" src="gallery2.jpg"></img></a>
        <div id="light" class="white_content2"></a> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img id="gallery2lb" src="gallery2.jpg"></img></a></div>
        <div id="fade" class="black_overlay2"> 
        </div>

因为您有重复的id

灯和
文档。getElementById
将始终返回第一个。通常我们给相似的元素赋予相同的
class
，给它们不同的
id
s，看起来你只是在做相反的事情。您应该将第二个img的
id
更改为类似
light2
和
document.getElementById（'light2'）.style.display='block'在第二个
。这很有效，伙计，非常感谢。