Question

我正在创建一个360色的色轮。我的标记的要点如下：

HTML：

<table class="table1">
  <td class="medium-grey"></td>
  <td class="charcoal"></td>
  <td class="black"></td>
  ...

CSS：

.medium-grey { background-color: #76878e; }
.charcoal { background-color: #534259; }
.black { background-color: #060807; }

我通过CSS为每个td添加背景颜色。我有很多的颜色手动添加到每个表，我发现这很麻烦。我很好奇是否有一种方法可以循环使用javascript或sass mixins附加到td类的颜色组。

Answer 1

var css_classes =['medium-grey' , 'charcoal', 'black'];

var idx = 0
$( "table.table1 td" ).each(function( index ) {
    $(this).addClass(css_classes[idx]);
    if (idx < css_classes.length-1){
      idx+=1;
    }else{
      idx = 0;
    }
});

给出css类，迭代td，并按顺序分配css类。

请参阅：jsfiddle

使用循环将类添加到多个HTML元素

1 个答案: