javascript - 使用 Jquery 使用 1 个按钮一次切换多个 div

Question

我有四个 div，我想用一个按钮一次切换一个。我想一个接一个地切换它们，而不是随机地切换。我已经尝试过类似下面的方法。

$(document).ready(function() {
  $('#toggle').click(function() {
    $('#1').hide();
  });
  $('#toggle').click(function() {
    $('#2').hide();
  });
  $('#toggle').click(function() {
    $('#3').hide();
  });
  $('#toggle').click(function() {
    $('#4').hide();
  });
});

.divs {
  border: 1px solid;
  height: 30px;
}

<div id='1' class='divs'></div>
<div id='2' class='divs'></div>
<div id='3' class='divs'></div>
<div id='4' class='divs'></div>

<button id='toggle'>
  toggle
</button>

Answer 1

保存每次点击的状态。

$(document).ready(function() {

  var state = 1;
  $('#toggle').click(function() {

    if(state==1){
       $('#1').hide();
       state=2;
    } 
    else if(state==2){
       $('#2').hide();
       state=3;
    }
    else if(state==3){
       $('#3').hide();
       state=4;
    }
    else if(state==4){
       $('#4').hide();
       state=1; //back to state
    }
  });