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

因此，我的表单中有这段代码，我希望通过反复单击同一个按钮来逐个切换每个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>

---

我只是一个js初学者，我想通过点击相同的按钮一个接一个地切换输入。因此，就像我单击新消息时一样：

消息2将出现

，然后当我再次单击它时，

消息3将出现

等等

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

code

使用下面提到的HTML代码：

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

---

问题是您的所有div都具有相同的id。如果更改id使其唯一，并增加尾随值（msg1、msg2，…），则函数可以更改为如下内容：

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

---

首先，在div上使用唯一的id可能更好

对于多个元素，首选类

Teran的解决方案是：

• 加载时，将显示所有div
• 第一次单击时，第一个div被隐藏
• 第二次单击时，将隐藏第二个div

这意味着您可以使用

$（“.my_class:visible”）.first（）.toggle（）
首先，ID只能使用一次

如果我正确理解了您的问题，您可以做的是首先隐藏所有消息并显示第一条消息

然后，当用户单击按钮时，显示第二个，然后是第三个，以此类推。
我不喜欢内联点击处理程序，所以我在JS中添加了一个
eventListener

// 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;
}

//对按钮的引用
var btn=document.querySelector（'.js按钮'）；
//显示哪条消息
var指数=1；
//邮件总数
var numMessages=$（'.hidemsg'）.length；
//隐藏我的一切
$（'.hidemsg'）.hide（）；
//然后切换第一个
切换器（）；
//当用户单击按钮时，切换下一个按钮
btn.addEventListener（'click'，toggler）；
函数切换器（）{
$（'.hidemsg'）.hide（）；
$（'#msg'+index）.show（）；
//到达终点后再次转到1
index=（index+1我使用了很多注释来帮助您准确地看到函数中发生了什么。但基本上，我通过使用
切换
锚中的
数据-
属性来跟踪应该显示哪个
div


//设置单击事件侦听器
$（'#toggler'）。在（'click'，函数（）{
//从锚标记获取“count”数据属性
变量计数器=$（this）.data（'count'）；
//将其指定为要显示的消息的ID
var nextMessage='#msg'+计数器；
$（nextMessage）.show（）；//显示该消息
计数器+=1；//递增计数器（用于下一次单击）
$（this.data（'count'，counter）；//将新的计数器变量分配给#toggler
})；
.hidemsg{
显示：无；
}

信息2：
信息3：
信息4：
信息5：
我想让它简短而甜蜜，让您思考单击的元素和下一个元素。让我知道这是否适合您。祝您好运


$（函数（）{
$（'.js按钮'）。单击（函数（）{
if（$（'div.active'）.next（）.hasClass（'hidemsg'））{
$（'div.active'）.next（'div'）.addClass（'active'）.end（）.removeClass（'active'）；
}否则{
警报（“对不起，没有下一条消息”）；
}
});
})；
.hidemsg{
显示：无；
}
.hidemsg.active{
显示：块；
}

信息2：
信息3：
信息4：
信息5：
如果您使用
hidemsg
隐藏div，则使用
$（“#msg2.hidemsg”）[0]。删除类（“hidemsg”）
。您还可以使用
not（）
和
：可见的
选择器并从中获取
[0]
项collection@teran你能给我解释一下吗？对不起，我不太喜欢js.tnxsee
$（“）（：visible）：first”）.toggle（）；
它可以工作，但切换隐藏了上一个div，我希望新div也显示在上一个div的下面。谢谢，它现在工作得很好。这正是我想要的。非常感谢！也非常感谢，它将极大地帮助我学习js基础知识。：）当有5条消息时，如果计数器变为6怎么办？
var x=1;
function toggler() {
   var hidemsgLength=$('.hidemsg').length; 
   if(x<hidemsgLength){
      $('.hidemsg').eq(x).show();
      x++;
   }
}

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

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

// 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;
}