Установить случайный цвет для каждого массива - PullRequest
0 голосов
/ 25 апреля 2020

Я циклически перебираю этот массив и хочу, чтобы каждый объект массива получал случайный цвет, но он продолжает добавлять i за getRandomColor () вместо добавления к переменной.

Таким образом, он заканчивается как например, # 0A60860 + i

Почему это так?

Мое приложение. 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)
  }
}

Ответы [ 2 ]

1 голос
/ 25 апреля 2020

Я вижу несколько вещей, которые не идеальны для этого фрагмента кода, но я предполагаю, что вы новичок.

Во-первых, это не массив, это просто несколько переменных.

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()

но он продолжает добавлять i за getRandomColor () вместо добавления к переменной.

Вы не можете получить доступ к переменной, "сделав ее имя", как this:

randomcolor = randomcolor + i;

Вместо этого вы должны создать массив , есть множество способов создать массивы в javascript (создать пустой и добавить значения после, создать уже заполненный , et c)

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())
}
0 голосов
/ 25 апреля 2020

Рассмотрим следующий пример.

$(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>

Если вы возвращаете строку и объединяете целое число, оно не будет добавлено, но добавится к строке. например, где i равно 1, #0A60860 + i будет #0A608601, а не #0A60861. Это также слишком много символов для правильного цветового кода. #0A6086, #000000 и #FFFFFF будут правильными.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...