Как создать нечетный/четный цветной список с модулем в Javascript?
Описание
В настоящее время я пытаюсь использовать оператор модуля в JavaScript, чтобы настроить таргетинг на определенный список HTML и сделать так, чтобы нечетные элементы там имели цвет X, а те, которые четные, имели цвет Y.
function newFunction() {
var items = document.getElementById("oddEven");
var index = items.querySelectorAll("li");
console.info(index);
for (var i = 0; i < items.length; i++) {
console.info(i);
console.info(items[i]);
if (i % 2 == 1) {
document.getElementById("oddEven").style.color = "orange";
} else {
document.getElementById("oddEven").style.color = "blue";
}
}
}
newFunction();<ul id = "oddEven">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>Ошибки Нет в JSlint, IDE VS CODE, Console.
Попытки Я искал похожие темы, касающиеся модуля, которых существует множество, но в основном все они, как правило, касаются цветов фона для совершенно разных элементов. Даже когда я копировал чужой код и просто удалял целевые элементы, я просто не мог заставить его работать.
Вопрос Я неправильно использую цикл for здесь? Или модуль просто полностью выключен? Я подумал о «если» и «иначе» в document.getX, возможно, они используются неправильно.
Есть ли кто-нибудь, кто может по-новому взглянуть на то, где мой код неверен, или просто подсказать..
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Пара вещей...
- Селектор
indexмог бы работать в цикле, но он даже не использовался, поэтому я его удалил. Я объединил их с цепочкой методов. Вы можете еще больше упростить с помощьюdocument.querySelectorAll('#oddEven li'). - Вы устанавливали класс в списке, а не элемент. Я устанавливаю его по индексу из списка селекторов.
function newFunction() {
var items = document.getElementById("oddEven").querySelectorAll("li");
for (var i = 0; i < items.length; i++) {
if (i % 2 == 1) {
items[i].style.color = "orange";
} else {
items[i].style.color = "blue";
}
}
}
newFunction();<ul id = "oddEven">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>Добавляя альтернативу, он перебирает NodeList с помощью .forEach() и использует тернарные операторы:
node.style.color = index === 0 || index % 2 === 0 ? colorEven : colorOdd;
Значение текущего узла (элемента) является цветом для четных чисел, ЕСЛИ индекс равен 0 Индекс ИЛИ можно разделить на 2 поровну, ИНАЧЕ, это цвет нечетных чисел.
const items = document.querySelectorAll("li");
function stripes(nodeList, colorOdd, colorEven) {
nodeList.forEach((node, index) => {
node.style.color = index === 0 || index % 2 === 0 ? colorEven : colorOdd;
});
}
stripes(items, 'orange', 'blue');<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>Вместо того, чтобы устанавливать item.style.color, вам лучше добавить класс к элементу списка, например item.classList.add('odd'); (или «даже»), и стилизовать li.odd и li.even так, как вы хотите.
const oddEvenClasses = [ 'even', 'odd' ];
function newFunction() {
var items = document.getElementById("oddEven").querySelectorAll("li");
for (var i = 0; i < items.length; i++) {
items[i].classList.add(oddEvenClasses[(i+1) % 2]);
}
}
newFunction();li.even {
color: orange;
}
li.odd {
color: blue;
}<ul id = "oddEven">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>Конечно, вы также можете сделать это с помощью чистого CSS и без JS, используя селектор CSS li с nth-of-type.
ul.oddEven li:nth-of-type(2n) {
color: orange;
}
ul.oddEven li:nth-of-type(2n+1) {
color: blue;
}<ul class = "oddEven">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>