Javascript переключает несколько div один за другим, нажав на ту же кнопку

Question

Итак, у меня есть этот код в моей форме, и я хочу, чтобы каждый divs переключал один за другим, нажимая одну и ту же кнопку несколько раз. Но когда я нажимаю кнопку, все появляется, есть ли способ переключать ее один за другим, нажимая ту же кнопку?

<div id="msg2" class="hidemsg"> 
    <label for="commentcont" class="control-label">Message 2:</label> 
    <input type="text" class="form-control" name="comment2" placeholder="New message." /> 
</div> 
<div id="msg2" class="hidemsg"> 
    <label for="commentcont" class="control-label">Message 3:</label> 
    <input type="text" class="form-control" name="comment3" placeholder="New message." /> 
</div> 
<div id="msg2" class="hidemsg"> 
    <label for="commentcont" class="control-label">Message 4:</label> 
    <input type="text" class="form-control" name="comment4" placeholder="New message." /> 
</div> 
<div id="msg2" class="hidemsg"> 
    <label for="commentcont" class="control-label">Message 5:</label> 
    <input type="text" class="form-control" name="comment5" placeholder="New message." /> 
</div> 

Вот кнопка, которая переключает его;

<a href="#" type="button" class="btn btn-default" onclick="toggler(\'msg2\');">New Message</a> 

Код javascript для того, чтобы перевернуть его;

function toggler(divId) { 
    $('#' + divId).toggle(); 
} 

Я просто новичок в JS, и я хочу, чтобы переключить входы один за другим, нажав на ту же кнопку. Так что, когда я нажимаю новое сообщение: Message 2 will appear, тогда, когда я нажимаю его снова, Message 3 will appear так далее и т. Д.!

Answer 1

Я не уверен, но попробуйте нижеуказанным code

Использование нижеуказанным HTML код:

<a href="#" type="button" class="btn btn-default" onclick="toggler();">New Message</a> 

Использование перечисленных ниже код JavaScript:

var x=1; 
function toggler() { 
    var hidemsgLength=$('.hidemsg').length; 
    if(x<hidemsgLength){ 
     $('.hidemsg').eq(x).show(); 
     x++; 
    } 
} 

Теперь приходя в CSS части :

.hidemsg{display:none;} 
.hidemsg:first-child{display:block;} 

Answer 2

Проблема в том, что все ваши div имеют одинаковый идентификатор. Если изменить идентификаторы, так что они являются уникальными, с и все большее значение трейлинг (msg1, msg2, ...), эта функция может быть изменено на что-то вроде этого:

var counter = 1; 
    function toggler(divId) { 
     $('#' + divId + counter).toggle(); 
    counter++; 
    } 

Answer 3

Во-первых, это может быть лучше использовать уникальные идентификаторы на div.

Для нескольких элементов, предпочитайте класс.

решение ТЕРАН является:

• на нагрузке, все дивы отображаются
• на первый щелчок, первый ДИВ скрыт
• на второй клик, второй ДИВ скрыт
• ...

Это означает, что вы можете использовать $(".my_class:visible").first().toggle();

Answer 4

Прежде всего, ID может использоваться только один раз.

Что вы можете сделать, если я правильно понял ваш вопрос, сначала скрыть все сообщения и отобразить первый.

Затем, когда пользователь нажимает кнопку, отображает второй, затем 3-й и т. Д. Я не люблю встроенный обработчик кликов, поэтому я добавил eventListener в JS.

// reference to button 
var btn = document.querySelector('.js-button'); 

// which message to display 
var index = 1; 

// total number of messages 
var numMessages = $('.hidemsg').length; 

// hide 'm all 
$('.hidemsg').hide(); 

// and toggle the first 
toggler(); 

// when user clicks button, toggle the next one 
btn.addEventListener('click', toggler); 

function toggler() { 
    $('.hidemsg').hide(); 
    $('#msg' + index).show(); 

     // go to 1 again when the end is reached 
    index = (index + 1 <= numMessages) ? index + 1 : 1; 
} 

https://jsfiddle.net/j32yjsaw/1/

Answer 5

Я использовал много комментариев, чтобы помочь вам увидеть то, что происходит в функции. Но в основном, я отслеживаю, какой div должен отображаться с использованием атрибута data- в якоре toggle.

//Set up the click event listener 
 
$('#toggler').on('click', function() { 
 
    
 
    //Get the 'count' data property from the anchor tag 
 
    var counter = $(this).data('count'); 
 
    
 
    //assign that to be the ID of the message you want to display 
 
    var nextMessage = '#msg' + counter; 
 
    
 
    $(nextMessage).show(); //Show that Message 
 
    
 
    counter += 1; //increment counter (for next click) 
 
    $(this).data('count', counter); //assign new counter var to #toggler 
 
});

.hidemsg { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" data-count="2" id="toggler" type="button" class="btn btn-default">New Message</a> 
 
<div id="msg2" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 2:</label> 
 
    <input type="text" class="form-control" name="comment2" placeholder="New message." /> 
 
</div> 
 
<div id="msg3" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 3:</label> 
 
    <input type="text" class="form-control" name="comment3" placeholder="New message." /> 
 
</div> 
 
<div id="msg4" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 4:</label> 
 
    <input type="text" class="form-control" name="comment4" placeholder="New message." /> 
 
</div> 
 
<div id="msg5" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 5:</label> 
 
    <input type="text" class="form-control" name="comment5" placeholder="New message." /> 
 
</div>

Answer 6

Я хотел бы, чтобы держать его коротким и сладким, где вы думаете о щелкнули элемента и следующего элемента. Дайте мне знать, если это сработает для вас. Удачи!

$(function() { 
 

 
    $('.js-button').click(function() { 
 
    if ($('div.active').next().hasClass('hidemsg')) { 
 
     $('div.active').next('div').addClass('active').end().removeClass('active'); 
 
    }else{ 
 
     alert('Sorry, there is no next message'); 
 
    } 
 
    }); 
 

 

 
});

.hidemsg { 
 
    display: none; 
 
} 
 

 
.hidemsg.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="msg1" class="hidemsg active"> 
 
    <label for="commentcont" class="control-label">Message 2:</label> 
 
    <input type="text" class="form-control" name="comment2" placeholder="New message." /> 
 
</div> 
 
<div id="msg2" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 3:</label> 
 
    <input type="text" class="form-control" name="comment3" placeholder="New message." /> 
 
</div> 
 
<div id="msg3" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 4:</label> 
 
    <input type="text" class="form-control" name="comment4" placeholder="New message." /> 
 
</div> 
 
<div id="msg4" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 5:</label> 
 
    <input type="text" class="form-control" name="comment5" placeholder="New message." /> 
 
</div> 
 

 
<a href="#" type="button" class="btn btn-default js-button">New Message</a>