Question

我有一个程序，在用户初始化列表项时会生成一个列表。

现在我想修改我的循环，以便每个其他行的文本都是彩色的，例如红色和蓝色，即第2行是红色，第4行是蓝色，6是红色，8是蓝色等等。

我不确定应该如何编写循环？

代码：

<div id="list"><div>
...

        var entries = Number(prompt("How many list items would you like?"));
        list = document.getElementById("list");
        var temp = "<ol>";
        for (i = 1; i <= entries; i++){
            temp += "<li>";
            temp += "List item " + i;
            temp += "</li>";
        }
        temp += "</ol>";
        list.innerHTML = temp;

Answer 1

您可以使用CSS来获得所需的效果。

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

但是如果你仍然想要使用JavaScript，你可以保持当前的for循环，但在循环中使用一个检查来查看你是否在奇数或偶数索引上。

if (i % 2 == 0) {
    if (i % 4 == 0) {
        element.style.color = 'blue';
    } else {
        element.style.color = 'red';
    }
}

我也不确定你是否意识到，但你需要使用document.createElement来实际创建你想要的DOM元素。除非element.style是HTML DOM元素，否则element将无效。

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

如果您还想使用innerHTML，我想您可以在循环中执行此操作（仅使用三元条件来显示编写if-else的另一种方式）：

temp += "<li style='background: ";
if (i % 2 == 0) {
    temp += (i % 4 == 0) ? "blue" : "red";
}
temp += "'>";
temp += "List item " + i;
temp += "</li>";

Answer 2

您可以使用模运算符

if (i % 2 == 0) {
    // Do your stuff
}

Answer 3

类似的东西：

if (i % 2 == 0) {
   if (i % 4 == 0) {
      // change color blue
   } else {
      // change color red
   }
}

Answer 4

纯CSS解决方案 -

 li { color: green; }
 li:nth-child(odd) { color: red; }
 li:nth-child(even) { color: blue; }

如何使用JavaScript中的循环将样式更改为每个其他行？

4 个答案: