javascript两色重复效果答案

【问题标题】：javascript two color repeating effectjavascript两色重复效果
【发布时间】：2011-06-29 05:53:12
【问题描述】：

有没有办法用 javascript 重复两种颜色。例如，我在 3 个不同的框中有一些文本。

文字 1
文字 2
文字 3

现在我希望 1 和 3 为红色，第二个为黑色。现在每次我添加一些新行时，颜色都会改变，如果我添加 Text 4 - to be - black，然后是 Text 5 - 红色。

有没有办法只用 js 做到这一点？

【问题讨论】：

为了以后参考，它被称为斑马条纹

标签： javascript css colors effect repeat

【解决方案1】：

您可以使用 jQuery 的 odd selector 或 even selector 它的 0-based 来做到这一点：

特别注意，从 0 开始的索引意味着，与直觉相反， :odd 选择第二个元素，第四个元素，依此类推在匹配的集合中打开。

假设你有这些 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';
}

【讨论】：

首先，OP说的是红色和黑色。其次，如果您使用 jQuery 的 .addClass() 方法，则类名前不需要空格。
感谢您的澄清。 OP，请使用您想要的任何颜色 =)

【解决方案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>

【讨论】：

应该存储liArray=document.getElementById('mylist').children;和liArray.length。
没有没有工作..有点令人困惑..输出的文本是基于 php ..他将它发送到模板，然后模板输出的 php 变量。我只有 1 个 div 和里面的 php 变量。
@waraza 根据@DanMan 这个答案是不正确的。如果您要使用此答案，请使用var liArray=document.getElementById('mylist').children;

【解决方案3】：

你可以使用jQuery来做，但是如果你是初学者，最好先学习一些vanilla 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/

【讨论】：