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

_「私はここで何をしないのですか？」_ CSSはこれを解決するために必要なすべてのツールを提供しているので、正しい考え方の誰もJSをこれ以上使用しないようにします。 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） 'で置き換えることができると付け加えたいと思います。 @ Nathan（登録商標）P –

。コード内の他の場所で関数が使用されていないとすれば、合理的です。さらにシンプルになります – Mistalis

自分の部分に新人の移動があります。みんなありがとう。 –

にSyntaxError：欠落しています。 for-loopイニシャライザの後（コードの36行目）。

ので、使用：

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

- あなたはJavaScriptを使用して作業する場合、ブラウザのコンソールやjsのエラー（F12）でご確認ください。

出典

2017-08-29 14:58:24 CoursesWeb

最初の回答と同じ回答 –

なぜ複雑なことをやり直すのではないのですか？ CSSが期日になるとCSSを使用し、Javascriptが期日になると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

データベースからユーザーレコードを取得するときにソリューションが自動的に生成されるため、クラスに1つずつ追加する機能はありません。彼らはすべて同じクラスか全くクラスではありません。 –

そして、なぜあなたはその能力を持っていませんか？ –

このソフトウェアの仕組みは、1つのdivが書き込まれ、ユーザー情報が入力され、各ユーザーごとに繰り返されるためです。これにより、新しいユーザーや訪問者が追加されると自動的にディスプレイボードに表示されます。 HTML自体は静的ではありません。 –

、救助に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の背景色を交互に表示

答えて

関連する問題