向一组生成的元素添加不同的 CSS 规则答案

【问题标题】：Add differing CSS rules to a set of generated elements向一组生成的元素添加不同的 CSS 规则
【发布时间】：2014-11-06 23:37:18
【问题描述】：

我想循环并添加几个多色跨度到 div 容器。为了有效地做到这一点，我只是更改了css，而不是向元素添加新的颜色类：

      var colorEn =  ["RoyalBlue", "LawnGreen", "red", "orange", "yellow", "black", "white", "MediumOrchid"];
      for ( i = 0; i < colorEn.length; i++ ) {
            var $span = $('<span />').attr('class', 'coloratorSquare');     
               $span.css({background : colorEn[i]});
               $("#colorator").append($span);
      }

生成，例如：

<span class="coloratorSquare active" style="background: rgb(65, 105, 225);"></span>

然后，当我选择（单击）某个跨度时，它会将颜色更改为银色，表明它已被选中，并将所有其他同级跨度设置回其原始颜色。这是一个sn-p：

        $(this).addClass("active").siblings().removeClass("active");

问题是，如果我更改 span 元素 ($span.css(...)) 的 css，它不会在添加/删除类上应用 CSS 更改。但是，如果我注释掉更改跨度的 css，则不会添加多种颜色，但 active 类添加/删除选定/取消选择的跨度会按预期更改颜色：

// $span.css({background : colorEn[i]});

CSS：

        .active {
            background-color: Silver;
            color: black;
        }

我根本不会更改跨度的.css，但我认为在生成期间向每个跨度添加类是没有意义的，并且必须为每种颜色添加CSS 类规则以复制该@ 987654333@ 功能。

我的问题：我怎样才能将多个不同的 css 规则（例如：多色）添加到随机生成的元素中，而无需 a) 在 CSS 文件中手动生成所有这些规则，以及 b) 更改.css 使用 jQuery，这样会导致添加/删除 CSS 类规则时出现问题。

如果不清楚，抱歉。

谢谢！

【问题讨论】：

您绝对应该使用类进行操作，而不是直接使用 css。
您直接更改 CSS，然后当单击一个跨度时，您希望其余的“更改回原始颜色”。当您直接更改 CSS 时，您更改了原始颜色。当然它不会变回原来的颜色，你把那个颜色去掉，换成另一种颜色。（或者也许我没有明白你想说的）......另外，waht dfsq 说
应用于元素的样式优先于类。如果你想这样做，你可能需要更改样式而不是添加和删除类，我知道这会更复杂。

标签： javascript jquery html css

【解决方案1】：

你可以在银色上使用!important，让它覆盖你元素的本地设置属性，但这种技术是不受欢迎的。

我的建议是考虑情况；如果这不是一次性代码，那么在元素上设置类而不是直接操作它们的样式属性通常更有意义。如果你需要它来制作模型，那么一定要在上面拍!important 并继续前进。

【讨论】：