单击偶数元素时，将类添加到偶数元素；单击奇数元素时，将类添加到奇数元素

Question

我试图在单击偶数元素时将类添加到偶数元素，并在单击奇数元素时将类添加到奇数元素。

我试过使用：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>

如果单击“两个”，则应突出显示元素二，四，siz和八。 如果单击一个，则应突出显示元素1、3、5和7。 （当我说突出显示时，我可能只添加一个类：

.red {
    background:red;
}

Answer 1

这是一种实现方法：

这里的例子

$("#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添加类。

Answer 2

只需这样做：

$('#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');
});

Answer 3

没有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");
            }
        }
    });
  }
}());