Question

我有一个带有图像的HTML页面（想用作按钮）和一些我设置为CSS可见性隐藏的图像：隐藏。我想点击这个＆＃39;图像＆＃39; w-click.png＆＃39;＆＃39;另外几张图片出现了。

所以，标记到其他一些图像。在我的情况下，我想要点击＆＃39; w-click.png＆＃39;调用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 =＆＃34; myImageId＆＃39;对于每个图像，但它只显示一个图像

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

Answer 1

在jQuery中它就像

一样简单

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";
}

Answer 2

为所有图像添加课程说＆＃34; hid_img＆＃34;

<div class="invisible-livingroom">
    <img class="hid_img" src="IMAGE/w-clock.png" style="position:absolute; margin-left:1200px; filter:brightness(1.3);visibility:hidden; " />
    <img class="hid_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;"/>
</div>

然后您可以使用以下脚本

var x = document.getElementsByClassName("hid_img");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.visibility = "visible";
}

替代方案，您可以隐藏整个div块，而不是隐藏所有图像，然后单击显示它。

<div id="lr" class="invisible-livingroom" style="visibility:hidden;"></div>

然后您可以将其可见性设置为

document.getElementsById("invisible-livingroom").style.visibility = 'visible';

Answer 3

我建议您为触发元素提供id，从inline css分隔/移动到单独的css file，并且有很多方法可以使用javascript。请查看这个

//declaring variables

var trigger = document.getElementById("trigger");

trigger.addEventListener('click', function(e) {
  var c = document.getElementsByClassName("invisible-livingroom")[0] //only try to get first array. elements could have same class name
  c.style.display = 'block';
})

/*set default none*/

.invisible-livingroom {
  display: none;
}
/*for convenient only*/

img {
  height: 50px;
  width: 50px;
  background-color:blue;
}

<img id="trigger" src="IMAGE/w-click.png" />

<div class="invisible-livingroom">
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
</div>

请访问这个： w3schools

HTML单击显示图像

3 个答案: