javascript - 一个图像，两个动作

Question

我正在寻找可以执行以下操作的 javascript 命令：

点击图片 -> 打开剧透

再次点击图片 -> 隐藏剧透

这是我目前得到的：

我的html中的javascript

<script>
function myFunction() {
document.getElementById("prvy").innerHTML = document.getElementById('spoiler_id').style.display='';}
</script>

剧透

<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" 
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none'; 
document.getElementById('show_id').style.display='';" 
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>

还有我的按钮：

<div id="prvy" onclick="myFunction()"></div>

我设法做的是点击一张图片，这将打开剧透。但是，我一直无法做第二部分，再次点击它会关闭扰流板。

我也为解决方案做了 serach，对我没有任何帮助，甚至没有：Link

我也厌倦了 if{} else{} 语句，但也没有用。

非常感谢您的帮助，因为我对此感到绝望。

Answer 1

您可以使用 jQuery .toggle() 切换显示/隐藏

$("#prvy").click(function() {
    $("#spoiler_id").toggle();
});

注意：您需要在文档中包含 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

工作sn-p：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" 
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none'; 
document.getElementById('show_id').style.display='';" 
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>


<div id="prvy" onclick="myFunction()">button</div>

<script>
  $("#prvy").click(function() {
    $("#spoiler_id").toggle();
  });
</script>

Answer 2

在单击按钮的 JavaScript 中，使用简单的 jQuery 函数切换。

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

Toggle 将在当前显示时隐藏所选元素，如果当前隐藏则显示该元素。

Answer 3

你需要一些在函数被调用时翻转的状态。

像这样。

<script>
var state = false;
function myFunction() {
  state = !state;
  if(state){
    //do something
  }else{
   //do something else
  }

}
</script>

Answer 4

这就是你所有的代码吗，如果你只是给按钮一个点击功能，然后在你的 js.

我可以看到你所有的 html

Answer 5

我正在使用 javascript 举例说明相关问题。

HTML：

<script type="text/javascript">
       var permit = 'true';
       function showhide() {
       var getcont = document.getElementsByClassName('hidshowcont');
                if (permit === 'true') {
                    permit = 'false';
                    getcont[0].style.display = 'block';
                }
                else {
                    permit = 'true';
                    getcont[0].style.display = 'none';
                }

            }
        </script>

<style type="text/css">
            .hidshowcont{
              height: 200px; 
              width: 300px; 
              border: 1px solid #333333; 
              display: none;
            }
        </style>

<a href="javascript:void(0)" onclick="showhide();"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1cSDTn18ufwjuMihttTvCPJOnFY-4hxbPcaOVd87nSPaQakbP9IERaQ" /></a>
        <br />
        <br />
        <div class="hidshowcont">
            This is an example of hide and show the container by clicking of an image.
        </div>

这对你有很大帮助