html - 未过滤的第 n 个 child

Question

我有几个元素，我想使用 nth-child 来应用 background-color。问题是我需要能够使用 javascript 动态隐藏这些元素中的任何一个。我想我可以通过添加/删除一个 allow 类，并对其应用 nth-child 来保持交替颜色，但无济于事。我在 jsfiddle 中有一个例子。 http://jsfiddle.net/tL40wz03/ 感谢您的帮助!

HTML

<div class="item allow"></div>
<div class="item allow"></div>
<div class="item allow"></div>
<div class="item allow"></div>
<div class="item allow"></div>
<div class="item allow"></div>
<div class="item allow"></div>
<div class="item"></div>
<div class="item allow"></div>
<div class="item"></div>
<div class="item allow"></div>

CSS

div {
  display: block;
  height: 100px;
  width: 100px;
}

div.allow{
    background: gray; 
}

div:nth-child(even){
  background: orange;
}
div:not(.allow){
    display:none;
}

Answer 1

你需要 JS，比如

function markEven() {
    var items= document.querySelectorAll('div.item');
    var count = 0;
    for (var i = 0; i < items.length; i++) {
        var classes = items[i].classList;
        classes.toggle('even', classes.contains('allow') && ++count % 2);
    }
}

每次将 allow 添加到元素或从元素中删除时调用它。

然后

div.item       { display: none;  background: gray;   }
div.item.allow { display: block;                     }   
div.item.even  {                 background: orange; }