Question

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

点击图片 - ＆gt;打开扰流器

再次点击图片 - ＆gt;隐藏剧透

这是我到目前为止所得到的：

我的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>

我设法做的是点击图片，这将打开剧透。 Hovewer，我已经无法完成第二部分，再次点击它会关闭扰流板。

我也为解决问题做了serach，没有什么对我有用，甚至没有：Link

如果{} else {}声明，我也很累，但也不适合我。

非常感谢帮助，因为我对这个问题感到绝望。

Answer 1

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

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

Toggle将隐藏当前显示的元素，如果当前隐藏，则显示该元素。

Answer 2

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

像这样。

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

}
</script>

Answer 3

您可以使用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>

工作片段：

<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 4

这就是你的所有代码，如果你只是给按钮一个点击功能，然后在你的js中调用那个函数，那对你来说会更容易，而且也不那么容易混淆。

我可以看到你的所有HTML

Answer 5

我用javascript给出一个关注问题的例子。

<强> HTML：

Gunner()

<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>

这对你有很大帮助

javascript - 一个图像，两个动作

5 个答案: