Добавлять класс к четным элементам при щелчке по четному элементу и добавлять класс к нечетным элементам при щелчке по нечетному элементу

0

Я пытаюсь добавить класс к четным элементам, когда щелчок четного элемента и добавление класса к нечетным элементам при нажатии на нечетный элемент.

Я попытался использовать: nth-child (even): nth-child (odd), но я не могу понять, как определить, является ли элемент нажатым четным или нечетным.

Содержите этот базовый HTML-код

<ul id="list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
</ul>

Если вы нажмете "два", необходимо выделить два, четыре, восемь и восемь элементов. Если вы нажмете один, элементы 1, 3, 5 и 7 должны быть выделены. (когда я говорю выделенный, я могу просто добавить класс:

.red {
    background:red;
}
  • 0
    red - плохое имя класса. В какой-то момент вы, вероятно, захотите изменить цвет подсветки, и вы получите что-то вроде .red { background: blue; }
  • 0
    Нечетным и четным вы имеете в виду фактическое значение текста вашего элемента списка? Или просто их индекс в списке? Так что, если бы первым пунктом было «два», это все равно считалось бы странным? Что не работает с :nth-child(even) :nth-child(odd) ?
Теги:

3 ответа

0
Лучший ответ

Вот один из способов сделать это:

Пример здесь

$("#list > li").on("click",function(){
    $('.red').removeClass('red');
    if($(this).index() % 2 == 0) {
       $('#list > li:even').addClass('red');
    } else {
       $('#list > li:odd').addClass('red');
    }
});

Используйте $(this).index() % 2 == 0 чтобы выяснить, является ли элемент нажатым четным или нечетным. Затем просто добавьте класс, используя :even/ :odd.

Поделиться
  • 0
    Благодарю. Это работает в вашем примере, но не на моем сайте. есть идеи?
  • 0
    @ Greg4Hughes, возможно, вам следует обернуть этот код в обработчик готовых документов и загрузить jQuery перед этим сценарием.
Показать ещё 3 комментария
0

Без jQuery.

(function() {
  var nodes = document.querySelectorAll("#list li");
  for (var i = 0; i < nodes.length; i++)
    setup(nodes[i],i); 

  function setup(node, index) {
    node.addEventListener("click", function() {
        for (var j = 0; j < nodes.length; j++) {
            nodes[j].classList.remove("red");
            if (index % 2 === 0 && j % 2 === 0 ||index % 2 === 1 && j % 2 === 1) {
                nodes[j].classList.add("red");
            }
        }
    });
  }
}());
Поделиться
0

просто выполните следующее:

$('#list li').click(function(){
    $('#list li').removeClass('red'); // remove the red class first
    ($(this).index() % 2 === 0) ? $('#list li:even').addClass('red') : $('#list li:odd').addClass('red');
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню