div上的交替背景颜色

我需要在行中有不同颜色的div。div上的交替背景颜色

我试图在普通浏览器中工作，然后尝试在后端/前端实现它。所以这里是我的测试代码。我不能为了我的生活找出为什么这不起作用。我已经尝试了与身体onload而不是在脚本标记，我已经尝试链接到外部jS。我想到了一个示例代码，这将是最简单的方法。

<!doctype html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 

 
    <title></title> 
 
    <meta name="description" content="HTML5"> 
 
    <meta name="author" content="Site"> 
 
    <style> 
 
    .testclass { 
 
     width: 100%; 
 
     height: 10px; 
 
     background-color: #fdc345; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="testclass"></div> 
 
    <div class="testclass"></div> 
 
    <div class="testclass"></div> 
 
    <div class="testclass"></div> 
 
    <script> 
 
    function isEven(value) { 
 
     if (value % 2 == 0) { 
 
     return true; 
 
     } else { 
 
     return false; 
 
     } 
 
    } 
 

 
    function setColors() { 
 
     var userList = document.getElementsByClassName("testclass"); 
 
     var i; 
 
     for (i = 0 i < userList.length; i++) { 
 
     if (isEven(i) == true) { 
 
      userList[i].style["background-color"] = "red"; 
 
      /* I also tried document.getElementsByClassName("testclass")[i].style.backgroundColor = "red" */ 
 
     } else { 
 
      userList[i].style["background-color"] = "blue"; 
 
     } 
 
     } 
 
    } 
 
    window.onload = setColors; 
 
    </script> 
 
</body> 
 

 
</html>

缺少什么我在这里？

来源

2017-08-29 Travis Fleenor

_“我缺少的是在这里吗？” _ - 他们正确的思想中没有人再使用JS，因为CSS为您提供了解决这个问题所需的所有工具。 https://developer.mozilla.org/en/docs/Web/CSS/:nth-child – CBroe

您的for循环是否丢失了分号或它只是复制粘贴错误？ –

感谢这个CBroe，这实际上可以解决我们的问题，而且非常简单。 –

由于控制台中的错误提示，您错过了for循环中的;。添加它，它的工作原理。

注意我还简化了您的isEven()函数。由于提到了@Nathan，您也可以通过删除该功能使其更简单，并直接在if表中对其进行测试。

function isEven(value) { 
 
    return (value % 2 == 0); 
 
} 
 

 
function setColors() { 
 
    var userList = document.getElementsByClassName("testclass"); 
 
    var i; 
 
    for (i = 0; i < userList.length; i++) { // <-- /!\ Here /!\ 
 
     if (isEven(i)) { 
 
     userList[i].style["background-color"] = "red"; 
 
     } else { 
 
     userList[i].style["background-color"] = "blue"; 
 
     } 
 
    } 
 
} 
 
window.onload = setColors;

.testclass { 
 
    width: 100%; 
 
    height: 10px; 
 
    background-color: #fdc345; 
 
}

<div class="testclass"></div> 
 
<div class="testclass"></div> 
 
<div class="testclass"></div> 
 
<div class="testclass"></div>

来源

2017-08-29 14:54:28 Mistalis

我想补充一点，'isEven'函数没用，可以用'if（i％2）'替换。 –

@NathanP。同意，假设该函数没有用在代码中的其他地方，它会更简单 – Mistalis

我的总菜鸟移动。多谢你们。 –

语法错误：缺少;在循环初始化程序之后（代码中的第36行）。

所以，使用：

for (i=0; i<userList.length; i++) { 
//... 
}

- 当您使用JavaScript工作，检查浏览器的控制台或者JS错误（F12）。

来源

2017-08-29 14:58:24 CoursesWeb

与第一个答案相同.. –

为什么不停止复杂的事情呢？当CSS到期时使用CSS，当Javascript到期时使用Javascript。

<style> 
.testclass { 
     width: 100%; 
     height: 10px; 
     background-color: #fdc345; 
    } 

    .even{ 
background-color:red !important; 
} 
    .odd{ 
background-color:blue !important; 
} 
    </style> 

    /... rest of code .../ 
    <div class="testclass even"></div> 
    <div class="testclass odd"></div> 
    <div class="testclass even"></div> 
    <div class="testclass odd"></div>

来源

2017-08-29 15:03:41

因为解决方案在从数据库中提取用户记录时会自动生成div，所以我无法将一个类添加到另一个类中。他们都是同一班或根本没有班。 –

为什么你不具备这种能力？ –

，因为这个软件的工作方式是编写一个div，这个div由用户信息填充，然后为每个用户重复。这确保了当新用户或访客被添加时，他们自动最终在显示板上。在这方面，html本身不是静态的。 –

远用JavaScript和CSS伪类:nth-child救援...

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

.testclass { 
 
    height:1em; 
 
    margin: 1em; 
 
    background: red; 
 
} 
 
.testclass:nth-child(2n) { 
 
    background: green; 
 
}

<div class="container"> 
 
    <div class="testclass"></div> 
 
    <div class="testclass"></div> 
 
    <div class="testclass"></div> 
 
    <div class="testclass"></div> 
 
</div>

来源

2017-08-29 16:02:53 CBroe

div上的交替背景颜色

回答

相关问题