Переключить несколько divs по одному с помощью кнопки 1 с помощью 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

Прежде всего, сохраняя числовые идентификаторы не хорошо, поэтому, учитывая, что вы измените их после подопечных, я пишу оба ответа с числовыми идентификаторами и без числовых идентификаторов.

С помощью цифровых идентификаторов легко сделать.

Предположит, у вас есть кнопка для переключения на другие четыре див, то это будет выглядеть следующим образом:

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>

Сейчас подходит к не числовым идентификаторам.

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: На мой взгляд, вы не должны использовать числовые идентификаторы.

---

Дальнейшая справка ко всему.

Если вы не знаете, сколько ДИВ бы там, но у Вас есть четкое правило вырезать, что DIV-х следовать последовательности ли не они имеют числовые/не числовые идентификаторы, то вы можете изменения код слегка включить этот так же, как это.

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>

Днем кодирования.