如何使用按钮显示/隐藏图像答案

【问题标题】：How to make an Image display/hide using a button如何使用按钮显示/隐藏图像
【发布时间】：2016-08-06 10:38:54
【问题描述】：

我正在使用以下代码在按下按钮时制作图像：

<html>
<head>
<title>Image Display Test</title>
<script type="text/javascript">
<!--
    function showImage(){
        document.getElementById('loadingImage').style.visibility="visible";
    }

-->
</script>
</head>
<body>
    <input type="button" value="Show Button" onclick="showImage();"/>
    <img id="loadingImage" src="pickups1.png" style="visibility:hidden"/>
</body>
</html>

到目前为止它可以工作，但是图像仍然在屏幕上，有没有办法让它再次单击图像消失？

【问题讨论】：

标签： javascript html image button

【解决方案1】：

您可以检查图像是否可见，然后相应地隐藏/显示它：

var elem = document.getElementById('loadingImage');
if (elem.style.visibility === 'visible') {
   elem.style.visibility = 'hidden';
} else {
   elem.style.visibility = 'visible';
}

或使用快捷方式（三元运算符）：

var elem = document.getElementById('loadingImage');
elem.style.visibility = elem.style.visibility === 'visible' ? 'hidden' : 'visible';

【讨论】：

【解决方案2】：

试试这个代码

<html>
<head>
<title>Image Display Test</title>
<script src="../js/jquery-1.7.2.js"></script>

<script type="text/javascript">
function showImage(){
    $('#loadingImage').toggle();
}
</script>
</head>
<body>
    <input type="button" value="Show Button" id="hide_show"  onclick="showImage();"/>
    <img id="loadingImage" src="1.jpeg"/>
</body>
</html>

【讨论】：

【解决方案3】：

这是一个工作示例：http://jsfiddle.net/rVBzt/

<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">

<a id="toggle">click to toggle</a>

img {display: none;}

a {cursor: pointer; color: blue;}

$('#toggle').click(function() {
    $('#tiger').toggle();
});

【讨论】：