Tumblr发布两种不同颜色的骑行

Question

我想这样做，使特定帖子周围的容器颜色与邻近的容器颜色不同。基本上，容器只需要在两种不同颜色之间循环。

左侧是它目前的样子，正是我想要的样子。谢谢！

CSS

#content {
  float:left;
  width:800px;
  padding:25px;
  top:-50px; left:45px;
  background:transparent;
  {block:PermalinkPage}
  width:300px;
  {/block:PermalinkPage}
}

.entry {
  width:150px;
  margin:50px;
  overflow:hidden;
  background:#336136;
  margin-left:-12px;
  margin-bottom: -10px;
  padding:12px;
  {block:PermalinkPage}
  width:250px;
  margin-left:40px;
  {/block:PermalinkPage} 
}

.entry:nth-child(odd) {
background: #000;
}

HTML

<div id="content">
  {block:Posts}
  <div class="entry">

  {miscellaneous_blocks_here}

  </div>
  {/block:Posts}
</div>

Answer 1

为什么不使用CSS3选择器并放弃javascript舞蹈？

.entry:nth-child(odd) {
  background: #000;
}

.entry:nth-child(even) {
  background: #ff003d
}

浏览器支持：http://caniuse.com/css-sel3

Answer 2

一个好主意是使用类和ID。对于您想要此功能的每个课程，您可以将您的ID增加一个：

$('.your_class_for_each_item').each(function(){
        i++;
            var newID='your_id'+i;
        $(this).attr('id',newID);
        $(this).val(i);
    });

这将产生newID1，newID2等。然后对于奇数ID，使用颜色和偶数ids另一种颜色。你使用这样的函数：

function(){
  if(i%2==0){ //check if the number is odd
    var z = document.getElementById('newID');
    z.setAttribute('style','background:color_for_even_numbers');
  }
  else{
   z.setAttribute('style','background:color_for_odd_numbers');
  }
}