javascript - 单击显示 div，图像

Question

当我单击一个框时，我制作了这段代码来显示一个 div：

JS

<script type="text/javascript">
var bool = 0;
function showDiv() {
    if (bool == 1) {
        bool = 0;
        document.getElementById('show').style.visibility = "hidden";
    } else if (bool == 0) {
        bool = 1;
        document.getElementById('show').style.visibility = "visible";
    }
}​
</script>

HTML

<input type="button" value="click" onclick="showDiv();" />

<div id="show" style=" visibility:hidden;">
  <p>it is okay it is okay it is okay it is okay it is okay</p>
</div>

但是，当我想要单击以显示 div 的图像时，我该怎么做。

Answer 1

当你标记你的问题 jquery 时，我建议使用.toggle方法来代替..

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

Answer 2

使用 jQuery，您可以将代码简化为：

$('input,img').click(function() {
    $('#show').css('visibility', ($('#show').css('visibility') == 'visible') ? 'hidden' : 'visible');
});​

jsFiddle 示例

Answer 3

做

$('#imageId').click(showDiv);

将showDiv函数绑定到clickid 为 imageId 的元素上的事件。

参考：http ://api.jquery.com/click/

Answer 4

最简单的方法（鉴于您已经拥有的）：

<img src="myimage.jpg" onclick="showDiv();"/>

但是，如果您实际上使用的是 jQuery，那么您可以使用 .toggle 方法，这意味着您不必费心维护您的bool变量（这实际上应该是一个布尔值！）。

使用 jQuery，您可以执行以下操作：

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