Question

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

<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的toggle方法。在初始化时隐藏第二个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的评论，使用此选择器要好得多。

Answer 2

第一件事，您不会看到空白divs。

示例-1

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

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

示例-2 您可以检查元素是否可见：

$(document).ready(function() {
    $('.change').click(function() {
      if($('#first').is(":visible")){
      $('#first').hide();
      $('#second').show();
      }else{
      $('#first').show();
      $('#second').hide();
      }
    });
  });

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

在2个div的显示之间切换

2 个答案: