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
    }
  });

Answer 2

  $(document).ready(function() {
  $('#toggle').click(function() {
    $('.divs:visible:first').hide();
  });
});

Answer 3

试试这个

var count = 1;
$(document).ready(function () {
    $('#toggle').click(function(){
        $('.divs').show();
        if(count == 4)
            count = 1;
        $('#' + count).hide();
        count++;
    });
});

Answer 4

首先，保持数字ID并不好，所以考虑到你会在病房之后改变它们，我用数字ID和没有数字ID来写答案。

使用数字ID，很容易。

假设您有按钮来切换其他四个div，那么它将如下所示：

var state = 1;
$("#toggleButton").click(function(){
   $("#"+state++).slideToggle();
   if(state===5){state=1;}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='1' >1</div>
<div id='2' >2</div>
<div id='3' >3</div>
<div id='4' >4</div>

<button id="toggleButton">
 toggle
</button>

现在进入非数字ID。

var state = 1;
$("#toggleButton").click(function(){
  $("#div"+state++).slideToggle();
  if(state===5){state=1;}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='div1' >1</div>
<div id='div2' >2</div>
<div id='div3' >3</div>
<div id='div4' >4</div>

<button id="toggleButton">
 toggle
</button>

仅供参考：我认为您不应使用数字ID。

进一步添加更多代码。

如果您不知道有多少div，但是您有一个明确的规则，即div的遵循序列，无论是否有数字/非数字ID 然后您可以稍微更改代码以合并，就像这样。

var state = 1;//first button id to be toggled
var total = 4;//this will be the total number of divs to be handled by the button
$("#toggleButton").click(function(){
  $("#"+state++).slideToggle();
  if(state===(total+1)){state=1;}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div id='1' >1</div>
<div id='2' >2</div>
<div id='3' >3</div>
<div id='4' >4</div>

<button id="toggleButton">
 toggle
</button>

快乐的编码。

Answer 5

使用class而不是Id多次使用

＆＃13;

var i = 1;
$('#toggle').click(function(){
  $('.divs').show();
  $('#' +  i).hide();
  i++;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1' class='divs'>dsgsdg</div>
<div id='2' class='divs'>64636</div>
<div id='3' class='divs'>46y</div>
<div id='4' class='divs'>4373477</div>

<button id='toggle'>
  toggle
</button>

＆＃13;

Answer 6

遍历每个元素并使用切换。这给你想要的效果。

$('button').click(function(){
  $('.divs').filter(function(index,item){
  $(item).toggle('slow')
 })
})

看看这个演示 - https://jsfiddle.net/ukw5wcmt/

Answer 7

  var i = 1;
    $('#toggle').click(function(){
      $('.divs').show();
      $('#' +  i).hide();
      if(i==4)
        {
        i=1;
        }else{
        i++;
       }
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id='1' class='divs'>dsgsdg</div>
    <div id='2' class='divs'>64636</div>
    <div id='3' class='divs'>46y</div>
    <div id='4' class='divs'>4373477</div>

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

试试这个

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

7 个答案: