Question

我需要在行中使用替换颜色的div。

在我尝试在后端/前端实现它之前，我试图让它在常规浏览器中运行。所以这是我的测试代码。我不能为我的生活找出为什么这不起作用。我已尝试使用body而不是脚本标记的onload，我尝试链接到外部jS。我想一个示例代码，这将是最简单的方法。

＆＃13;

<!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>

＆＃13;

我在这里缺少什么？

Answer 1

正如控制台中的错误所示，您错过了for循环中的--create table [CallResults] (databasename varchar(10),callresultdescription varchar(10),myvalue int) --insert into [CallResults] --values ('a','AA',1), --('b','BB',2), --('c','CC',3) --select * from [CallResults] declare @campaign varchar(10)='d',@resultcode varchar(10)='dd' ; SELECT databasename, callresultdescription, count(1) as [Count] FROM [CallResults] WHERE databasename IN (@campaign) AND callresultdescription IN (@resultcode) GROUP BY databasename, callresultdescription UNION SELECT databasename=@campaign, callresultdescription=@resultcode, 0 as [Count] from [CallResults] where databasename not IN (@campaign) AND callresultdescription not IN (@resultcode)。添加它，它可以工作。

注意我还简化了您的;功能。正如@Nathan所述，您还可以通过删除此函数并直接在isEven()语句上对其进行测试来使其更简单。

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;
}

Answer 2

为什么不停止复杂化的事情呢？在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>

Answer 3

SyntaxError：missing;在for-loop初始化程序之后（代码中的第36行）。

所以，请使用：

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

- 使用javascript时，请检查浏览器的控制台或js错误（F12）。

Answer 4

远离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>

div上的交替背景颜色

4 个答案: