Преобразовать значения массива в формат RGB - PullRequest
0 голосов
/ 11 апреля 2020

У меня есть ряд значений в таблице, и я хотел бы разделить их 3 на 3, чтобы использовать их в качестве значения RGB.

Я пробовал что-то вроде этого:

var color = [143,204,211,25,35,59,204,219,209,128,135,124,38,139,216,84,106,105,205,87,114,165,175,88];
var cList = $('ul.color_palette');
            $.each(color, function(i)
            {
                var li = $('<li/>')
                    .addClass('color'+ i)
                    .css('background-color', 'rgb(' + color[i] + ')')
                    .appendTo(cList);            
            });

Мне бы хотелось, чтобы это выглядело примерно так:

<ul class="color_palette">
   <li class="color0" style="background-color: rgb(143, 204, 211);"></li>
   <li class="color1" style="background-color: rgb(25, 35, 59);"></li>
   <li class="color2" style="background-color: rgb(204, 219, 209);"></li>
   <li class="color3" style="background-color: rgb(128, 135, 124);"></li>
   <li class="color4" style="background-color: rgb(38, 139, 216);"></li>
   <li class="color5" style="background-color: rgb(84, 106, 105);"></li>
   <li class="color6" style="background-color: rgb(205, 87, 114);"></li>
   <li class="color7" style="background-color: rgb(165, 174, 88);"></li>
</ul>

Вы можете мне помочь?

1 Ответ

0 голосов
/ 11 апреля 2020

На самом деле это всего лишь упражнение по разбивке цветового массива для создания кластеров из трех значений, которые затем можно использовать в итерации в существующем коде.

Решение, измененное из этого ответа на другой вопрос ( { ссылка } - @Blazemonger)

var color = [143,204,211,25,35,59,204,219,209,128,135,124,38,139,216,84,106,105,205,87,114,165,175,88];
var rgbValues = [];

for (i = 0; i < color.length; i += 3) {
  rgbValues.push(color.slice(i, i + 3).join(', '));
}
console.log(rgbValues); 
// gives [
//  "143, 204, 211",
//  "25, 35, 59",
//  "204, 219, 209",
//  "128, 135, 124",
//  "38, 139, 216",
//  "84, 106, 105",
//  "205, 87, 114",
//  "165, 175, 88"
//]
...