时间戳

首页 > 解决方案 > 如何在对每个元素执行函数时循环遍历 HTML 元素

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

问题描述

我是 Javascript 的新手，我想实现一个 for 循环，该循环将遍历其类选择的每个 div。

简单的想法是在我单击按钮时显示 DIV。但它必须是顺序的：我单击 DIV1 出现，当我再次单击时出现 DIV2 等等。目前我的代码只改变了一个 DIV 的类，而不是其他的。这是我的代码示例：

$(document).ready(function(){
    
      // jQuery methods go here...
    var count = document.getElementById("page1").childElementCount;
    
    	for(var i = 0; i < count; i++){
    		
    		var myClass = ".panel" + i; 
    		
    		$("button").click(function(){
    			$(myClass).addClass("showing animated fadeIn")
    		});
    	}
    	
    	
    	
    });/**document ready **/
     .showing{
    	background-color: red;
    	height: 200px; 
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>title</title>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
         <link rel="stylesheet" type="text/css" href="animate.css">
      </head>
      <body>
      
      <button class="one">Click Me!</button>
     
      		<div id="page1">
      			
      			<div class="panel1">
      				
      			</div>
      			<div class="panel2">
      				
      			</div>
      			<div class="panel3">
      				
      			</div>	
      			<div class="panel4">
      				
      			</div>
      		
      		</div><!-- page one -->
      		
      		<div id="trial">
      			
      		</div>
      	
      	<script src="jquery-3.3.1.min.js"></script>
      	<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
      	<script type="text/javascript" src="trial.js"></script>
      </body>
    </html>

请让我知道我缺少什么，特别是在 for 循环中，或者我是否可以做其他事情来获取 DIV 并在每次单击按钮时添加一个类。

标签： javascripthtmlcss

解决方案

首先，class为具有相同样式/行为的多个元素创建 HTML 属性。id如果要将一个面板与另一个面板分离，则应该使用。

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

如果可能的话，总是尝试在没有 jQuery 的情况下用 Javascript 做你想做的事！

var i = 1;

function clickBtn() {
  if (!document.getElementById("panel-" + i))
    return;
  document.getElementById("panel-" + i).classList.add("visible");
  i++;
}
.panel {
  width: 50px;
  height: 50px;
  
  display: none;
  
  margin: 5px;
  
  background-color: #bbb;
}

.panel.visible {
  display: block;
}
<button onclick="clickBtn()">click me</button>

<div>
  <div id="panel-1" class="panel"></div>
  <div id="panel-2" class="panel"></div>
  <div id="panel-3" class="panel"></div>
  <div id="panel-4" class="panel"></div>
</div>

推荐阅读