javascript - 在 2 个 div 的显示之间切换

Question

我正在尝试学习 jquery，并且我有 2 个 div 元素，我只需要一个按钮即可在隐藏和显示之间切换。我试图写出我想要的一切，但我认为语法是错误的。

<div id="first"></div>
<div id="second">
</div>
<button class="change">change</button>

CSS:

  #first {
    width:500px;
    height:500px;
    margin:0 auto;
    background-color:#ccc;
  }
  #second {
    width:500px;
    height:500px;
    margin:0 auto;
    background-color:black;
    display:none;
  }

我写的是Jquery

$(document).ready(function() {
    $('.change').click(function() {
      $('#first').hide();
      $('#second').show();
    });
  });

我正在考虑 if else 语句，但我不确定是否可以处理它。

Answer 1

您可以使用 jQuery 的切换方法。让你的第二个 div 在初始化时隐藏...

$(document).ready(function() {
    $('.change').click(function() {
        $('#first, #second').toggle();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">first</div>
<div id="second" style="display: none;">second</div>
<button class="change">change</button>

工作示例:https://jsfiddle.net/tanaydin/kjyq0eow/3/

文档:http://api.jquery.com/toggle/

编辑后:@Darren Sweeney 的评论，使用此选择器效果更好。