Javascript 如何在对每个元素执行函数时循环遍历HTML元素

我是Javascript的新手，我想实现一个for循环，它将按照类的选择遍历每个div

简单的想法是当我点击按钮时显示div。但它必须是顺序的：我单击DIV1出现，当我再次单击时，DIV2出现，依此类推。目前，我的代码只更改一个DIV的类，而不更改其余的类。以下是我的代码示例：

$（文档）.ready（函数（）{
//jQuery方法放在这里。。。
var count=document.getElementById（“page1”）.childElementCount；
对于（变量i=0；i

。显示{
背景色：红色；
高度：200px；
}

标题
点击我！

您可以使用计数器，如

单击计数

而不是for循环

$（文档）.ready（函数（）{
//jQuery方法放在这里。。。
var-clickCount=1；
$（“按钮”）。单击（函数（）{
var myClass=“.panel”+点击计数；
$（myClass）.addClass（“显示动画fadeIn”）
点击计数++；
});
});/**文件准备就绪**/

。显示{
背景色：红色；
高度：200px；
}

标题
点击我！

这一点有点倒退；您正在尝试将事件处理程序附加到每个元素的按钮。相反，您应该为按钮提供一个事件处理程序，它在元素之间循环

您可以设置一个变量来跟踪当前高亮显示的元素，但更容易根据DOM的当前状态来确定：

$（文档）.ready（函数（）{
$（'button.one'）。单击（function（）{
$（'.showing'）//查找当前元素
.removeClass（'showing'）//清除它
.next（）//查找其下一个同级
.addClass（'showing'）；//显示
如果（$（'.showing'）。长度==0）{
//没有显示任何内容，所以显示第一个
$（'page1 div:eq（0）'）.addClass（'showing'）
}
})
})

#第1页div{height:10px}
#page1分区显示{背景色：红色}

点击我！

首先，HTML属性

类

用于具有相同样式/行为的多个元素。如果要将一个面板与另一个面板分离，则应使用

id

您必须存储计数变量才能知道下一个面板必须出现

如果可能的话，总是尝试在Javascript中不使用jQuery做你想做的事情

var i=1；
函数clickBtn（）{
如果（！document.getElementById（“面板-”+i））
回来
document.getElementById（“panel-”+i）.classList.add（“可见”）；
i++；
}

.panel{
宽度：50px；
高度：50px；
显示：无；
保证金：5px；
背景色：#bbb；
}
.panel.visible{
显示：块；
}

点击我

您可以做的是计算您拥有的子项的数量，并通过给定的迭代器比较单击的数量，以查看应该显示什么

我添加了一个额外的功能，一旦显示了div的最大数量，就可以再次隐藏元素

希望这有帮助

$（文档）.ready（函数（）{
$（'#page1'）。children（）。每个（函数（）{
$（this.hide（）；
});
});
var panel=“panel”；
var pannelNum=0；
var count=$（“#page1”）.children（）.length；
$（.one”）。在（“单击”，函数（）{
pannelNum=pannelNum+1；
如果（窗格>计数）{
$（'#page1'）。children（）。每个（函数（）{
$（this.hide（）；
});
pannelNum=0；
}
否则{
单击=面板+“”+窗格；
$（'.+单击）.show（）；
}
});

点击我！
这是面板1！
这是面板2！
这是面板3！
这是面板4！
当您要计算执行次数时，是否可以使用clickCount++的方法？我想这正是我所缺少的。这会有帮助的。