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; }

没有过滤的孩子

1 个答案: