Question

我正在循环遍历此数组，我希望每个数组对象都获得随机颜色，但是它一直在将i添加在getRandomColor（）后面，而不是添加到变量中。

所以它最终像例如＃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;

您应该创建一个array，有很多方法可以在javascript中创建数组（创建一个空数组，然后在其中添加值，创建一个已填充的数组，等等）

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

这将创建一个包含4个值的数组。这种语法称为“文字数组”，有关数组，请参见this answer

然后您使用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>

如果返回一个String并连接一个Integer，它将不会添加它，而是会附加到String上。例如其中i是1，#0A60860 + i是#0A608601，而不是#0A60861。对于正确的颜色代码来说，这也是太多字符。 #0A6086，#000000和#FFFFFF是正确的。

为每个数组设置随机颜色

2 个答案: