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

Question

我尝试了几个小时的东西，但现在希望从“外部”获得帮助。

我有一个<span>内部的 li 元素，用户可以根据需要重命名。名称约定始终相同，并用下划线分隔。

1. 分类名称
2. 类别
3. 元素名称
4. 有时甚至更多标识符为 3。

例子：

由于此列表可能会变得很长，因此我的想法是使用随机背景颜色使其更加清晰。问题来了。

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

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

编码：

 var lastPick;
 var rand;
 $('[tree-item-name]').each(function() {
   $(this).css('background',randomColor());
 });

 function randomColor() {
   var back = ["#ffc0cb61","rgba(192,255,210,0.38)","rgba(192,220,255,0.38)","rgba(241,192,255,0.38)","rgba(192,240,255,0.38)","rgba(255,221,192,0.38)","rgba(231,255,192,0.38)"];
   rand = back[Math.floor(Math.random() * back.length)];
   rand==lastPick?randomColor():rand;
   lastPick = rand;
   return rand;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Start</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Start_Go</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Won</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Won_Clear</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Lost</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Lost_Clear</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Quest_AskBet</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Quest_AskBet_Statistics</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Rules</span>
</li>

TL;博士：

我想要的逻辑是：

1. 检查所有 li 元素及其文本（跨度）
2. 根据标识符将组匹配在一起
3. 用下划线分隔的前三个组应该具有相同的颜色
4. A_B_C_123 应该具有与 A_B_C_321 相同的颜色，但 A_B_D_423 应该具有不同的颜色，依此类推。

希望它清晰而“简单”

标签： javascriptjquery

Answer 1

您可以执行以下操作。首先从innerHTML每个元素中获取前三个组，然后检查对象中是否key已经存在items。如果是，则采用分配的颜色，如果不是，则获取新的未使用的随机颜色并将其分配给新创建的key. 为了跟踪使用的颜色，我使用了一个数组 ( picked)。

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

var picked = [];
var rand;
var items = {};

$('[tree-item-name]').each(function() {
  let groups = $(this).html().split("_");    
  if(groups.length >= 3) {
    let item = [groups[0], groups[1], groups[2]].join("_");  
    if(!items[item]) {    // if the key doesn't exist
      items[item] = {     // make a new one
        "color": randomColor()
      };
    }
    $(this).css('background', items[item].color);
  }
});

 function randomColor() {
   var back = ["#ffc0cb61","rgba(192,255,210,0.38)","rgba(192,220,255,0.38)","rgba(241,192,255,0.38)","rgba(192,240,255,0.38)","rgba(255,221,192,0.38)","rgba(231,255,192,0.38)"];
   rand = back[Math.floor(Math.random() * back.length)];
   if(picked.includes(rand)) { // if the color was already chosen before
    rand = randomColor();             // generate a new one
   } else {
    picked.push(rand);         // otherwise add the newly selected color to the tracker array
   }
   return rand;
 }

body {
  background-color: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Start</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Start_Go</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Won</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Won_Clear</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Lost</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Lost_Clear</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Quest_AskBet</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Quest_AskBet_Statistics</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Rules</span>
  </li>
 </ul>