Question

如何简化这样的div设计？ Angular / Jquery解决方案很好。这是一个在电影之上的div过滤器。此外，这应该简化还是保留原样？

        <div id="filter">
            <div id="row1">
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
            </div>
            <div id="row2">
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
            </div>
            <div id="row3">
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
            </div>
            <div id="row4">
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
            </div>
            <div id="row5">
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
            </div>
        </div>

http://jsfiddle.net/yv5qe2gv/

Answer 1

你可以像这样使用linear-gradient：

.row {
    background-image: repeating-linear-gradient(
      90deg,
      rgba(24,24,24,.6),
      rgba(24,24,24,.6) 15%,
      rgba(10,10,10,.6) 15%,
      rgba(10,10,10,.6) 30%
    );
}

将html简化为row元素：

#filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh
}
.row {
  height: 20%;
  width: 100%;
  background-image: repeating-linear-gradient(90deg, rgba(24, 24, 24, .6), rgba(24, 24, 24, .6) 15%, rgba(10, 10, 10, .6) 15%, rgba(10, 10, 10, .6) 30%);
}
.row:nth-child(even) {
  background-image: repeating-linear-gradient(90deg, rgba(10, 10, 10, .6), rgba(10, 10, 10, .6) 15%, rgba(24, 24, 24, .6) 15%, rgba(24, 24, 24, .6) 30%);
}

<div id="filter">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

<子> DemoFiddle

请注意，此功能适用于chrome for crossbrowser support check CanIuse和CSSTricks

修改

感谢这个link with the work of Lea Verou，您只需要一个容器。

#filter { background: rgba(0,0,0,.3); background-image: linear-gradient(45deg, rgba(0,0,0,.3) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.3) 75%, rgba(0,0,0,.3)), linear-gradient(45deg, rgba(0,0,0,.3) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.3) 75%, rgba(0,0,0,.3)); background-size:180px 180px; background-position:0 0, 90px 90px }

唯一的问题是你需要一个固定的正方形值。

<子> DemoFiddle

Answer 2

您可以使用角度重复指令。

    <div id="filter">
        <div id="row{{index}}" ng-repeat="index in [1, 2, 3, 4, 5]">
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
        </div>
    </div>

如果您可以将索引变量模板化为ID，那么我不是肯定的，但那些ID甚至是重要的吗？此外，您可以创建指令以进一步减少灰色/黑色重复。就像一个偶数/奇数的东西。

Answer 3

这个Angular方法怎么样（可能需要围绕黑/灰色顺序进行调整）

<div id="filter">
  <div id="row{{x}}" ng-repeat="x in range(1,5)">
    <div class='fill{{(x+y) % 2 == 0 ? "black" : "gray"}}' ng-repeat="y in range(1,9)"></div>
  </div>
</div>

Answer 4

div循环是什么意思？我不确定我是否理解正确，但你想减少你的加价，对吗？

您可以首先删除内部div上的类名，转而使用:nth-child( odd )和:nth-child( even )。

这可能是你的新标记：

<div id="filter">
    <div id="row1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Answer 5

Html：

<div id="filter"></div>

Jquery：

var blackSquare = '<div class="filblack"></div>'
var whiteSquare = '<div class="filgrey"></div>'

for(k=0; k<8; k++)
{
    $('#filter').append('<div id="row'+k+'">');

    for(j=0;j<8; j++)
    {                
       if( ((j+k) % 2) == 0)
       {
           $('#row'+k).append(blackSquare);
       }
       else
       {
           $('#row'+k).append(whiteSquare);
       }
    }   

   $('#filter').append(' </div>');
}

如何简化此div循环

5 个答案:

<子> DemoFiddle

<子> DemoFiddle