Question

我有以下代码：

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

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

</div>

我正在使用knockoutjs迭代并创建一个网格列表。内部div有类＆＃34; ui-block-a＆＃34;。我需要将这个课改成＆＃34; ui-block-b＆＃34; ，＆＃34; ui-block-c＆＃34;，＆＃34; ui-block-d＆＃34;每次迭代。在＆＃34; ui-block-d＆＃34;它应该改回＆＃34; ui-block-a＆＃34;。

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绑定：

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

动态更改DIV元素的类名

1 个答案:

JSFiddle