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上的交替背景顏色

回答

相關問題