Javascript通过单击同一个按钮一个一个地切换多个div

Question

所以我的表单中有这段代码，我想通过重复单击同一个按钮来一个一个地切换每个 div。但是当我点击按钮时，一切都出现了，有没有办法通过点击同一个按钮来一个一个地切换？

<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

我不确定，但请尝试下面提到的代码

使用下面提到的 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;}