Javascript 基于动态生成的文本和特定图案的颜色li元素

我试了几个小时，但现在希望能得到“外界”的帮助

我有一个li元素，里面有一个

，用户可以根据需要重命名它。但名称约定始终相同，并用下划线分隔

类别名称

类别

元素名称

有时3的标识符甚至更多

例如：

因为这个列表可能会变得很长，所以我想用随机的背景色使它更清晰。问题来了

如何根据上述1-3语法设置每个li元素的颜色？ 它应该是这样的：

这就是我目前得到的。显然，只是迭代每个li，无法对其进行分类：

守则：

var-lastPick；
var rand；
$（“[tree item name]”）。每个（函数（）{
$（this.css（'background'，randomColor（））；
});
函数randomColor（）{
var back=[“#ffc0cb61”，“rgba（192255210,0.38）”，“rgba（192220255,0.38）”，“rgba（24112255,0.38）”，“rgba（192240255,0.38）”，“rgba（255221192,0.38）”，“rgba（231255192,0.38）”；
rand=back[Math.floor（Math.random（）*back.length）]；
rand==lastPick？randomColor（）：rand；
lastPick=rand；
返回兰特；
}

北京奥运会使命开始


BJ_任务(开始)(开始)


BJ_任务_冷却_赢得


BJ_任务(冷却)(解围)


BJ_任务(冷却)失败


BJ_任务(冷却)失败(清除)


BJ_Quest_AskBet


BJ_Quest_AskBet_统计


BJ_任务规则

您可以执行以下操作。首先从每个元素的

innerHTML

中获取前三个组，然后检查

项

对象中是否已经存在该

键。如果没有，则采用指定的颜色，如果没有，则获取一个新的未使用的随机颜色，并将其指定给新创建的
键
。为了跟踪使用的颜色，我使用了一个数组（
拾取的
）

测试并运行（运行几次以查看颜色是如何分配的）：


var=[]；
var rand；
变量项={}；
$（“[tree item name]”）。每个（函数（）{
让groups=$（this.html（）.split（“”）；
如果（groups.length>=3）{
让item=[groups[0]，groups[1]，groups[2]]。join（“”）；
如果（！items[item]）{//如果密钥不存在
items[item]={//新建一个
“颜色”：randomColor（）
};
}
$（this.css（'background'，items[item].color）；
}
});
函数randomColor（）{
var back=[“#ffc0cb61”，“rgba（192255210,0.38）”，“rgba（192220255,0.38）”，“rgba（24112255,0.38）”，“rgba（192240255,0.38）”，“rgba（255221192,0.38）”，“rgba（231255192,0.38）”；
rand=back[Math.floor（Math.random（）*back.length）]；
if（picked.includes（rand））{//如果之前已选择颜色
rand=randomColor（）；//生成一个新的
}否则{
picked.push（rand）；//否则，将新选择的颜色添加到跟踪器数组中
}
返回兰特；
}
正文{
背景色：#444；
}



北京奥运会使命开始


BJ_任务(开始)(开始)


BJ_任务_冷却_赢得


BJ_任务(冷却)(解围)


BJ_任务(冷却)失败


BJ_任务(冷却)失败(清除)


BJ_Quest_AskBet


BJ_Quest_AskBet_统计


BJ_任务规则

好的，谢谢大家。我错过了方便的代码注入功能