为每个数组设置随机颜色

Question

我正在循环这个数组，我希望每个数组对象都得到一个随机的颜色，但是它总是在getRandomColor()后面添加I，而不是添加到变量中。

所以它最终就像#0A60860 +i

为什么会这样呢？

我的app.js

function getRandomColor() {
  return "#" + Math.random().toString(16).slice(2,8);
}
let randomcolor = getRandomColor()
let randomcolor0 = getRandomColor()
let randomcolor1 = getRandomColor()
let randomcolor2 = getRandomColor()
let randomcolor3 = getRandomColor()
let randomcolor4 = getRandomColor()
let randomcolor5 = getRandomColor()
let randomcolor6 = getRandomColor()
let randomcolor7 = getRandomColor()
let randomcolor8 = getRandomColor()
let randomcolor9 = getRandomColor()
let randomcolor10 = getRandomColor()

var items = [{id: 24550986,username: "addwell",matchmaking_group_id: 5378563},{id: 30168682,username: "ekkelito",matchmaking_group_id: 5378563},{id: 41526903,username: "dkMrGOD",matchmaking_group_id: 5373230},{id: 87892435,username: "FluffyBunny",matchmaking_group_id: 5373230},{id: 115472481,username: "hinter",matchmaking_group_id: 5378563},{id: 290200108,username: "Jonatan",matchmaking_group_id: 5376993},{id: 296745880,username: "Joy",matchmaking_group_id: 5376993},{id: 352928851,username: "DiktatorN",matchmaking_group_id: 5376993},{id: 932540677,username: "MIKEEEEEEY",matchmaking_group_id: 5378560},{id: 1030322875,username: "fknbr0r",matchmaking_group_id: 5377517}],
  keys = { matchmaking_group_id: 'sections', username: 'items' }, // or more if required
  result = [],
  temp = { _: result };

items.forEach(function (object) {
  Object.keys(keys).reduce(function (level, key) {
    if (!level[object[key]]) {
      level[object[key]] = { _: [] };
      level._.push({ [key]: object[key], [keys[key]]: level[object[key]]._ });
    }
    return level[object[key]];
  }, temp)._.push({ title: object.title, description: object.description });
});

var arrayLength = result.length;
for (var i = 0; i < arrayLength; i++) {
  console.log(result[i]);
  console.log(i)
  randomcolor = randomcolor + i;

  var arrayLengthsections = result[i].sections.length;
  for (var ii = 0; ii < arrayLengthsections; ii++) {
    console.log(result[i].sections[ii].username)
    $( `span:contains('${result[i].sections[ii].username}')` ).css("border", '1px solid ' + randomcolor)
    console.log(randomcolor)
  }
}

Answer 1

在这段代码中，我看到了许多不太理想的东西，但我假设您是初学者。

首先，这不是数组，它们只是多个变量。

let randomcolor = getRandomColor()
let randomcolor0 = getRandomColor()
let randomcolor1 = getRandomColor()
let randomcolor2 = getRandomColor()
let randomcolor3 = getRandomColor()
let randomcolor4 = getRandomColor()
let randomcolor5 = getRandomColor()
let randomcolor6 = getRandomColor()
let randomcolor7 = getRandomColor()
let randomcolor8 = getRandomColor()
let randomcolor9 = getRandomColor()

但是它一直在getRandomColor()后面添加I，而不是添加到变量中。

您不能通过这样的“使其名称”来访问变量：

randomcolor = randomcolor + i;

您应该创建一个数组，有许多方法可以在javascript中创建数组(创建一个空数组，然后添加值，创建一个已经填充的数组，等等)

const randomColors = [
    getRandomColor(),
    getRandomColor(),
    getRandomColor(),
    getRandomColor(),
];

这将创建一个包含4个值的数组。这个语法称为“文字数组”--参见关于数组的这个答案

然后使用randomColors[i]访问它

但据我所见，你甚至不需要预先创建这些颜色，然后存储，你可以：

for (let ii = 0; ii < arrayLengthsections; ii++) {
    $( `span:contains('${result[i].sections[ii].username}')` )
        .css("border", '1px solid ' + getRandomColor())
}

Answer 2

考虑下面的例子。

​

$(function() {
  function getRandomColor() {
    return "#" + Math.random().toString(16).slice(2, 8);
  }

  function drawContent(data) {
    $.each(data, function(i, el) {
      $("<span>").html(el.username).appendTo($(".content"));
    });
  }

  var items = [{
    id: 24550986,
    username: "addwell",
    matchmaking_group_id: 5378563
  }, {
    id: 30168682,
    username: "ekkelito",
    matchmaking_group_id: 5378563
  }, {
    id: 41526903,
    username: "dkMrGOD",
    matchmaking_group_id: 5373230
  }, {
    id: 87892435,
    username: "FluffyBunny",
    matchmaking_group_id: 5373230
  }, {
    id: 115472481,
    username: "hinter",
    matchmaking_group_id: 5378563
  }, {
    id: 290200108,
    username: "Jonatan",
    matchmaking_group_id: 5376993
  }, {
    id: 296745880,
    username: "Joy",
    matchmaking_group_id: 5376993
  }, {
    id: 352928851,
    username: "DiktatorN",
    matchmaking_group_id: 5376993
  }, {
    id: 932540677,
    username: "MIKEEEEEEY",
    matchmaking_group_id: 5378560
  }, {
    id: 1030322875,
    username: "fknbr0r",
    matchmaking_group_id: 5377517
  }];
  
  console.log("items", items);

  drawContent(items);

  $.each(items, function(i, obj) {
    console.log("-Needle: " + obj.username);
    $(".content > span").each(function(j, el) {
      console.log("--Stack: " + $(el).text());
      if ($(el).text().indexOf(obj.username) == 0) {
        $(el).css("border", '1px solid ' + getRandomColor());
        console.log("---Hit^: " + $(el).attr("style"));
      }
    });
  });
});

.content span {
  display: inline-block;
  padding: 2px;
  margin-right: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content"></div>

​

如果您返回一个字符串，并连接一个Integer，它将不会添加它，而是会附加到该字符串中。在i是1的地方，#0A60860 + i是#0A608601，而不是#0A60861。这也是太多的字符适当的颜色代码。#0A6086、#000000和#FFFFFF将是正确的。