javascript - HTML 在点击时显示图像

Question

我有一个带有图像的 HTML 页面(想用作按钮)和一些我设置为通过 CSS visibility: hidden 不可见的图像。我想在单击此“图片‘w-click.png’”时显示另一张图片。

所以，标记到其他一些图像。在我的例子中，我希望点击“w-click.png”来调用 JavaScript 来显示图像。

我发现一键显示一个图像，但我想要一键显示多张图像....

编辑:这是我的代码

<img src="IMAGE/w-click.png" style="z-index:200; margin-left:6680px; position:relative; width:700px; margin-top:-100px; padding:0; position:absolute; " />

    <div class="invisible-livingroom">
        <img src="IMAGE/w-clock.png" style="position:absolute; margin-left:1200px; filter:brightness(1.3);visibility:hidden; " />
        <img src="IMAGE/w-stand.png" style="position:absolute; margin-left:1830px; margin-top:120px;filter:brightness(1.2);  height:800px; z-index:5; visibility:hidden;"/>
        <img src="IMAGE/w-cushion.png" style="position:absolute; margin-left:1450px; margin-top:270px; transform:rotate(2deg); visibility:hidden;"/>
        <img src="IMAGE/w-light.png" style="position:absolute; margin-left:1310px; width:900px; margin-top:-130px; filter:brightness(0.95); visibility:hidden;" />
        <img src="IMAGE/w-livingroom-table.png" style="position:absolute; margin-left:1310px; width:900px; margin-top:240px; filter:brightness(1.6); visibility:hidden;"/>
        <img src="IMAGE/w-frame2.png" style="position:absolute; width:300px; margin-left:1500px; margin-top:120px; visibility:hidden;"/>
    </div> 

编辑:我添加了这段 javascript 代码并向每张图片添加了 id="myImageId' 但它只显示了一张图片

function showImage() {
    var img = document.getElementById('myImageId');
    img.style.visibility = 'visible';
}    

Answer 1

var imagesRoot = document.getElementsByClassName("invisible-livingroom");
var images = imagesRoot[0].getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
    images[i].style.visibility = "visible";
}

在 jQuery 中它就像

一样简单

$(".invisible-livingroom img").css("visibility", "hidden")