用“for 循环”为每一秒更改颜色 ul li

Change color for every second ul li with a "for loop"

本文关键字：一秒 颜色 li ul 循环 for      更新时间：2023-09-26

我正在学习javascript，到目前为止，我了解很多事情是如何工作的。可悲的是，他们没有解释如何定位元素颜色或如何定位元素/选择器/div。

我

正在测试我的知识。我正在尝试通过使用 for 循环为每两个列表项提供红色。

我该怎么做？

var listColor = function(){
    var color = style.("red");
    var list = getElementsByTagName("li");
    for (i = 0; i < list.length; i + 2;) {
    list === color   
    }
    ];
    listColor();

这是我的 http://jsfiddle.net/Lr8nZ/15/

更新了 JSfiddle，但仍然无法正常工作 http://jsfiddle.net/Lr8nZ/23/

所以基本上：

红黑红黑

像这样的事情。 

  var listColor = function(){
  var list = document.getElementsByTagName("li");
  for (i = 0; i < list.length; i++) {
    if(i%2==0)
    list[i].style="color:red";
    else
        list[i].style="color:blue";
   }
 }
 listColor();

您有一些语法错误，但您可以这样做：

var listColor = function() {
  var list = document.getElementsByTagName('li');
  for (var i = 0, l = list.length; i < l; i++) {
    if (i % 2 === 0) {
      list[i].style.color = 'red';
    }
  }
};
// Or...
var listColor = function() {
  var list = document.getElementsByTagName('li');
  for (var i = 0, l = list.length; i < l; i += 2) {
    list[i + 1].style.color = 'red';
  }
};
listColor();

递增时i请确保使用 i++ 或 i += 1 更新其值，否则将创建一个无限循环。

i % 2使用%模运算符。这是您从两个数字相除得到的余数。偶数平均除以 2，因此余数将为 0，我们对此进行检查。

您要找的房产叫做style。它有一个名为 color 的属性，在这种情况下，我们将其设置为字符串'red'。

试试这个

    <html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){
        index=1;    
        $("#temp li").each(function(){
            if(index%2==0)
            {
                $(this).css("color","red")
            }
            index++;
        });
    })
    </script>
<style>
</style>
</head>
<body>
<ul id='temp'>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</body>
</html>

尝试使用控制台查看代码中的错误。它是任何js程序员都不可或缺的工具。这是更新的小提琴 http://jsfiddle.net/Lr8nZ/24/

您注意到的第一件事是 style.color('red') .为了使这一行成为有效的js，必须定义一个样式对象。否则它会在window上搜索它，这总是会导致混乱。

另一件事是注意我们如何实际分配新值来i for 循环的第三个条件。仅提及i+2是行不通的，因为i将保持不变，从而导致无限循环。

再次，启动 Web 控制台。通常，您可以通过右键单击页面>检查 Web 控制台>执行此操作。

相关文章：