javascript兩種顏色的重複效果

Question

有沒有一種方法可以用javascript重複其他顏色之一。例如，我在3個不同的框中有一些文字。

1. 文本1
2. 文本2
3. 文本3

現在我想在1和3是紅色的，第二次是黑色的。現在我每次增加一些新的線，要改變的顏色，如果我添加文本4 - 要黑色，然後文本5 - 紅色。

有沒有辦法只與js做到這一點？

Answer 1

你可以做到這一點jQuery的odd selector或even selector其0基於這樣：

特別要注意的是，從0 索引意味着， 與直覺相反：奇選擇 第二元素，第四元素，等 在匹配的集合內。

讓我們說你有這些li元素：

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 

和下面的CSS：

.red{ 
    color: red; 
} 

.green{ 
    color: green; 
} 

，如果你使用jQuery，併爲此獲得元素和用於連接類名奇數或偶數的適當配色方案：

console.log($('li:odd')); //[<li>​2​</li>​, <li>​4​</li>​] you'll get these elements 
console.log($('li:even')); //[<li>​1​</li>​,<li>​3​</li>​,<li>​5​</li>​] you'll get these 
$('li:odd').addClass(' red'); // turn color to red 
$('li:even').addClass(' green'); //turn color to green 

或常規的JavaScript：

var myLi = document.getElementsByTagName('li'); 

for(var i=0; i<myLi.length; i++){ 
    if(i%2 == 0) 
     myLi[i].className += ' red'; 
    else 
     myLi[i].className += ' green'; 
} 

Answer 2

<ul id="mylist"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 

<script type="text/javascript"> 
    liArray=document.getElementById('mylist'); 
    for(l=0;l<liArray.length;l++){ 
    if(l%2==1){ 
     liArray[l].style.color='#ff0000'; 
    } 
    } 
</script> 

Answer 3

您可以使用jQuery要做到這一點，但如果你是一個初學者，最好先學習一些香草JS。

function isOdd(num) { 
    return num % 2; 
} 

var para = document.getElementById('container').getElementsByTagName('p'); 

for (var i = 0; i < para.length; i++) { 
    // for readability 
    para[i].style.color = 'white'; 

    if (isOdd(i)) { 
     para[i].style.backgroundColor = 'red'; 
    } else { 
     para[i].style.backgroundColor = 'black'; 
    } 
} 

http://jsfiddle.net/Nyuszika7H/8h7RZ/1/embedded/result%2Cjs%2Chtml/