动态更改DIV元素的类名

Dynamically Changing the Class Name for a DIV Element

本文关键字：元素 DIV 动态      更新时间：2023-09-26

我有以下代码：

 <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"。

在父级上创建一个辅助函数：

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>

JSFiddle

相关文章：