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

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

使用类而不是ID为多次使用

var i = 1; 
 
$('#toggle').click(function(){ 
 
    $('.divs').show(); 
 
    $('#' + i).hide(); 
 
    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>

Answer 3

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

Answer 4

通过每个元件回路，并使用切换。这产生了你想要的效果。

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

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

Answer 5

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> 

试试这个

Answer 6

试试这个

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

Answer 7

首先，保持数字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>

FYI：在我看来，你不应该使用数字ID。

---

进一步增加更多的代码。

如果你不知道有多少格怎么会存在，但你有那个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>

编码愉快。