用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>

編碼愉快。