Question

我想要做的是，当我点击按钮然后一个div应该消失而另一个应该出现，如果我再次点击同一个按钮，那么第一个应该出现，第二个应该消失。这将一直持续到我点击按钮。

我尝试了什么：

JavaScript的：

function change_image(){
    var flag = true;
    if(flag){
        document.getElementById('speaker_main_div_with_rounded_image').style.display="none";
        document.getElementById('speaker_main_div_with_square_image').style.display="block";
        flag = false;
    } else {
        document.getElementById('speaker_main_div_with_rounded_image').style.display="block";
        document.getElementById('speaker_main_div_with_square_image').style.display="none";
        flag = true;
    }
}

HTML：

<input type="button" value="Click Here to get another image" onClick="change_image(this)">

任何帮助都会感激不尽。

谢谢。

Answer 1

您的flag变量是本地变量，并且在调用函数时其值始终相同。用以下内容初始化：

var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';

Answer 2

这是我使用jQuery Library的解决方案。

    <!DOCTYPE html>
    <html>
       <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script>
             $(document).ready(function(){
             	$("#btn1").click(function(){
             		$("#div1").toggle();
             		$("#div2").toggle();
             	});
             });
          </script>
          <style>
             .hide{
             display:none;
             }
          </style>
       </head>
       <body>
          <button type="button" id="btn1">Toggle</button>
          <div id ="div1">
             I am div 1
          </div>
          <div id ="div2" class="hide">
             I am div 2
          </div>
       </body>
    </html>

单击按钮时显示一个Div并隐藏另一个Div

2 个答案: