Question

<script>  
function showhide() {  
document.getElementById('someimage').style.visibility="hidden";   
        }  
</script>

目前我能够隐藏图像，但是我无法再显示它。如何使用javascript单击按钮时隐藏然后能够显示图像？

这是按钮：

<body>  
<input type="button" onclick="showhide()" />   
</body>

Answer 1

只需检查当前状态，然后采取相应措施。

function showhide() {
    var img = document.getElementById('someimage');
    if (img.style.visibility === 'hidden') {
        // Currently hidden, make it visible
        img.style.visibility = "visible";
    } else {
        // Currently visible, make it hidden
        img.style.visibility = "hidden";
    }
}

向所有提出建议的人简要介绍jQuery。

对于像这样的简单事情，不需要包含一个大的DOM操作库。如果你在一个更复杂的应用程序中做了很多这样的DOM操作，那么jQuery开始更有意义包含。

但是，当你使用jQuery时，了解jQuery正在为你做些什么也很重要。

Answer 2

jQuery的奇迹 - http://jsfiddle.net/PbG3t/

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

Answer 3

如果你正在使用jQuery，你可以使用（.toggle）方法，这简化了很多事情：

$('#someimage').toggle();

如果您想坚持使用手工制作的解决方案，我猜您的代码实际上缺少将元素的可见性设置为可见的决定位。尝试：

<script>  
  function showhide() {
      var element = document.getElementById('someimage');
      element.style.visibility = element.style.visibility == 'visible' 
          ? 'hidden' 
          : 'visible';   
  }  
</script>

干杯，亚历克斯

隐藏然后使用Javascript显示图像

3 个答案: