javascript - 动态更改 DIV 元素的类名称

Question

我有以下代码:

 <div class="choices ui-grid-c" data-bind="foreach: choices">

                    <div class="ui-block-a"> </div>

</div>

我正在使用 knockoutjs 来迭代并创建网格列表。内部 div 具有类“ui-block-a”。我需要在每次迭代时将此类更改为“ui-block-b”、“ui-block-c”、“ui-block-d”。在“ui-block-d”之后，它应该变回“ui-block-a”。

Answer 1

在父级上创建辅助函数:

self.blockClass = function(index) {
    var base = 'ui-block-';
    var blockIndex = index % 4;
    switch (blockIndex) {
      case 0:
        return base + 'a';
      case 1:
        return base + 'b';
      case 2:
        return base + 'c';
      case 3:
        return base + 'd';
    }
}

然后使用css绑定(bind)就可以了:

<div class="choices ui-grid-c" data-bind="foreach: choices">
    <div data-bind="css: $parent.blockClass($index())> </div>
</div>

JSFiddle