Question

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

我尝试过使用：nth-child（偶数）：nth-child（单数）但我似乎无法确定如何判断点击的元素是偶数还是奇数。

包含此基本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和八。如果单击一个，则应突出显示元素一，三，五和七。（当我说突出显示时，我可能只是添加一个类：

.red {
    background:red;
}

Answer 1

这是一种方法：

Example Here

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

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

3 个答案: