Javascript 在动态元素上应用渐变色或纯色

我正在尝试使用jquery将渐变或纯色应用于元素。为什么要使用jQuery？因为这个网站有几个不同的颜色组合，所以生成css类的工作太多了

假设我有一个JSON调用生成的列表

<div class="colours">
 <ul>
  <li class="black white"></li>
  <li class="green"></li>
 </ul>
</div>

---

我做错了什么？

我建议单独阅读每种颜色，然后应用渐变/纯色逻辑。比如：

$('li').each(function(){
    var classNames = $(this).attr("class").toString().split(' ');
    $.each(classNames, function (i, className) {
        // do solid color or gradient
    });
});

---

下面是一个使用数据属性的解决方案

首先，我迭代了.colors中的所有

元素

然后找到它的数据颜色属性

使用必要的线性渐变信息创建字符串

在其数据属性中添加所有颜色（以“，”分隔）

关闭线性渐变信息字符串

使用

css（）

将线性渐变应用于css规则

注意它可以有任何颜色值：

• 数据颜色（“rgb（255123,43）”

• 数据颜色（“#222#546”）

• 数据颜色（“rgb（2150255）#3a1”）

$（“.colors”）.find（'li'）。每个（函数（索引，e）{
变量$elem=$（e）；
var COLORATTRI=$（此）.data（“颜色”）；
var colors=coloratri.split（“，”）；
如果（颜色.长度>=2）{
var linear=“线性梯度（90度）”；
用于（颜色的var指数）{
线性+=颜色[指数]；
如果（索引！=colors.length-1）{
线性+=“，”；
}
}
线性+=”；
$elem.css({
背景：线性，
});
}else if（colors.length==1）{
$elem.css（“背景色”，颜色[0]）；
}
});
li{
填充：20px；
颜色：白色；
}


此处有一些文字
这里有一些文字
此处有一些文字
此处有一些文字
这里有一些文字
这里有一些文字
这里有一些文字

我猜你的字符串（
“-moz线性梯度（-45度，+颜色[0]+0%，+颜色[0]+49%，+颜色[1]+49%，+颜色[1]+100%）”
）就是问题所在；您需要将变量与字符串连接起来（给出：
'-moz线性梯度（-45度，+colors[0]+'0%'、+colors[0]+'49%，“+colors[1]+'49%，+colors[1]+'100%）
）为什么要在最后一行中使用
，
，连字符中的变量将不会由Javascript计算。使用字符串连接
+
。这看起来比编辑、扩展或重置css要痛苦得多。我不完全理解。。。类名是动态生成的？？！或者这是json调用后的一个“函数”…你能解释一个liitle吗？不，它只是在每个列表项中循环使用类名。好的，这正是我想要的！只有一件事。。。是否可以将eg设置为50%白色和50%黑色？因此，您将获得与普通css规则相同的
线性渐变（135度，#0000000%，#00000049%，#ffffff 49%，#ffffff 100%）线性渐变（135度，#0000000%，#00000049%，#ffffff49%，#ffffffff100%）？？我自己无法添加，因为类名是动态生成的。。。
$('li').each(function(){
    var classNames = $(this).attr("class").toString().split(' ');
    $.each(classNames, function (i, className) {
        // do solid color or gradient
    });
});