javascript - 迭代一个函数并将其插入数组以创建具有一定数量元素的数组

Question

我创建了一个函数来返回随机颜色并应用于文档中的几乎任何位置。到目前为止一切顺利，但现在我希望创建一个确定数量的数组(有多少项并不重要，但假设有四个)，这样我就可以使用数组的值来更改 a 每个字母的颜色某个词。

代码如下:

<div class="colourword">Anyword</div>

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  var colors = getRandomColor();

  $('colourword').html(function() {
    return $.map($(this).text().split(''), function(el, i) {
      return '<span style="color:' +colors+ '";>' + el + '</span>';
    }).join('');
  });

问题是我不知道如何迭代我的函数来创建数组。

我真的不知道从哪里开始，我尝试将函数插入数组中，但后来我不知道如何插入数字(例如 i<5)。

我真的需要一个提示，或者至少需要迭代数组的原理。

谢谢

Answer 1

非常接近。但是，我认为您不需要创建一个数组。只需在 map 回调中调用该函数即可。我在此示例中使用了所有普通 JS。

var colourword = document.querySelector('.colourword');
var text = colourword.textContent;

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

colourword.innerHTML = Array.from(text).map(function(letter) {
  return '<span style="color:' + getRandomColor() + '";>' + letter + '</span>';
}).join('');

<div class="colourword">Anyword</div>