Question

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

简单的想法是当我单击按钮时显示DIV。但这必须是连续的：单击“出现DIV1”，再次单击“出现DIV2”，依此类推。目前，我的代码仅更改一个DIV的类，而不更改其他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并添加课程。

Answer 1

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

您必须存储一个count变量才能知道接下来必须显示哪个面板。

如果可能，请始终尝试在不使用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>

Answer 2

您可以使用clickCount之类的计数器来代替for循环

$(document).ready(function(){
  // jQuery methods go here...   
  var clickCount = 1;
  $("button").click(function(){
    var myClass = ".panel" + clickCount; 
    $(myClass).addClass("showing animated fadeIn")
    clickCount++;  
  });
});/**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>

Answer 3

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

您可以设置一个变量来跟踪哪个元素当前处于突出显示状态，但是根据DOM的当前状态确定它更容易：

$(document).ready(function() {
  $('button.one').click(function() {
    $('.showing')              // find the current element
      .removeClass('showing')  // clear it
      .next()                  // find its next sibling
      .addClass('showing');    // show that
    if ($('.showing').length === 0) {
      // nothing is showing, so show the first one
      $('#page1 div:eq(0)').addClass('showing')
    }
  })
})

#page1 div {height: 10px}
#page1 div.showing {background-color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

上面有个小作弊-如果当前元素是最后一个元素，则它将不会突出显示next()。这就是为什么我要等到在移动突出显示之后看不到任何东西的原因；这样，它既适用于第一次单击，也适用于需要突出显示来循环回到第一个元素的情况。

如果您打算让元素按顺序显示它们自己而又不隐藏较早的元素，那么就去掉.removeClass('showing')行：

$(document).ready(function() {
  $('button.one').click(function() {
    $('.showing')              // find the current element
      .next()                  // find its next sibling
      .addClass('showing');    // show that
    if ($('.showing').length === 0) {
      // nothing is showing, so show the first one
      $('#page1 div:eq(0)').addClass('showing')
    }
  })
})

#page1 div {height: 10px}
#page1 div.showing {background-color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 4

您可以做的是计算您拥有的孩子数量，并比较给定迭代器的点击次数，以查看应显示的内容。

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

希望这会有所帮助。

	
$(document).ready(function() {
    $('#page1').children().each(function () {
        $(this).hide();
    });
});
		
var panel="panel";
var pannelNum=0;
var count = $("#page1").children().length;
		
$(".one").on( "click", function() {
    pannelNum=pannelNum+1;
				
    if(pannelNum > count) {
        $('#page1').children().each(function () {
            $(this).hide();
	});
	pannelNum=0;
    }
    else {
        clicked=panel+""+pannelNum;
	$('.'+clicked).show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="one">Click Me!</button>

<div id="page1">
  <div class="panel1">
    this is panel 1!
  </div>
  <div class="panel2">
    this is panel 2!
  </div>
  <div class="panel3">
    this is panel 3!
  </div>  
  <div class="panel4">
    this is panel 4!
  </div>
</div><!-- page one -->

<div id="trial">

</div>

在每个元素上执行功能时如何遍历HTML元素

4 个答案: