двухцветный повторяющийся эффект javascript - PullRequest
Новая
       30

двухцветный повторяющийся эффект javascript

1 голос
/ 17 февраля 2011

Есть ли способ повторить два цвета друг с другом с помощью JavaScript. Например, у меня есть текст в 3 разных окнах.

  1. Текст 1
  2. Текст 2
  3. Текст 3

Теперь я хочу, чтобы 1 и 3 были с красным, а вторая - с черным ... теперь каждый раз, когда я добавляю какую-то новую строку, цвета меняются, если я добавляю текст 4 - быть - черный, то текст 5 - красный.

Есть ли способ сделать это только с помощью js?

Ответы [ 3 ]

1 голос
/ 17 февраля 2011

Вы можете использовать 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/

1 голос
/ 17 февраля 2011

Вы можете сделать это с помощью нечетного селектора jQuery или четного селектора на основе 0, так:

В частности, обратите внимание, что на основе 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';
}
0 голосов
/ 17 февраля 2011 
<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>
...