如何在 html 中获取一个按钮来显示/隐藏图像？ [复制]答案

【问题标题】：How to get a button in html to show/hide an image? [duplicate]如何在 html 中获取一个按钮来显示/隐藏图像？ [复制]
【发布时间】：2016-11-19 20:30:35
【问题描述】：

我想要 2 个按钮或只有 2 个标签或点赞来显示/隐藏 2 个图像，但彼此独立。我已经为 1 个图像编码，但如果我设置它现在它不起作用两次。见JSFiddle。

HTML：

<html>
<head>
<title></title>
</head>
<body>
<p><img height="600" id="map_img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Hsi-h000.png/600px-Hsi-h000.png" style="display: none;" width="600" /> <input id="Mapred" onclick="showImg()" type="submit" value="Mapred" /></p>

<p><img height="800" id="map_img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Sandro_Botticelli_-_La_nascita_di_Venere_-_Google_Art_Project_-_edited.jpg/800px-Sandro_Botticelli_-_La_nascita_di_Venere_-_Google_Art_Project_-_edited.jpg" style="display: none;" width="502" /> <input id="Map" onclick="showImg2()"     type="submit" value="Map" /></p>
</body>
</html>

【问题讨论】：

标签： javascript jquery html button html-components

【解决方案1】：

这是你需要的吗？因为我不完全理解你的问题。

function showImg() {
    document.getElementById("map_img").style.display = "";
}

function showImg2() {
    document.getElementById("map_img2").style.display = "";
}

<p><img height="600" id="map_img"src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Hsi-h000.png/600px-Hsi-h000.png" style="display: none;" width="600" /> 

<input id="Map" onclick="showImg()" type="submit" value="Map" /></p>

<p><img height="600" id="map_img2"src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Hsi-h000.png/600px-Hsi-h000.png" style="display: none;" width="600" /> 

<input id="Map" onclick="showImg2()" type="submit" value="Map" /></p>

【讨论】：

【解决方案2】：

JavaScript

function showImg() {
            document.getElementById("map_img").style.display = "block";
        }
function hideImg() {
        document.getElementById("map_img").style.display = "none";
    }

JQuery

我在帖子中看到了 JQuery 的标签，我会推荐 Javascript，因为它更快并且不需要加载 JQuery，但仍然。

$("#map_img").toggle();
$("#map_img").hide();
$("#map_img").show();
For map_img:

$(document).ready(function(){
   $("#button-link").click(function(event){
     //Your actions here
   });
 });

【讨论】：

【解决方案3】：

你可以简单地使用

style.display == 'block'

阻止任何图像或使用

style.display == 'none'

我给你看一个完整的例子，你可以理解..

<html>
<body>

<h1>What Can JavaScript Do?</h1>
<div id="myDiv">
	<img id="myImage" src="pic_bulboff.gif" style="width:100px">
</div>


<button onclick="LightOn()">Turn On</button>

<button onclick="LightOff()">Turn Off</button>

<button id="button" onclick="toggle_visibility('myDiv')">Toggle</button>


<script type="text/javascript">
	function LightOn(){
		document.getElementById('myImage').src='pic_bulbon.gif'
	}
	
	function LightOff(){
		document.getElementById('myImage').src='pic_bulboff.gif'
	}
	
	function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block')
          e.style.display = 'none';
        else
          e.style.display = 'block';
	}

</script>

</body>
</html>

【讨论】：

我可以在一个html中设置两次吗？（然后我得到 6 个按钮，用于 2 个图像
是的，你可以这样做..