javascript - 如何在 Javascript 中为每种颜色生成 3 种色调？

Question

我创建了一个 sass 函数，可以生成基色的浅色和深色版本，如下所示:

$colors: (
  betpawa-green: #107A3D,
  lime-green: #8DC63F,
  yellow: #FBCD00,
);

@mixin color-generator {
  @each $name, $hex in $colors {
    &-#{$name} {
      background-color: $hex;
    }

    &-#{$name}:nth-child(4n+1) {
      background-color: lighten( $hex, 10% );
    }

    &-#{$name}:nth-child(4n+3) {
      background-color: darken( $hex, 10% );
    }
  }
}

.bg {
  @include color-generator;
}

当我的 HTML 如下所示时，一切正常:

<div class='box bg-betpawa-green'>1</div>
<div class='box bg-betpawa-green'>2</div>
<div class='box bg-betpawa-green'>3</div>

<br />

<div class='box bg-lime-green'>1</div>
<div class='box bg-lime-green'>2</div>
<div class='box bg-lime-green'>3</div>

<br />

<div class='box bg-yellow'>1</div>
<div class='box bg-yellow'>2</div>
<div class='box bg-yellow'>3</div>

但是我想做的是从 Javascript 模板文字生成 HTML，但我有点卡住了。

我有一个常量的颜色:

  const colors = [
    'betpawa-green',
    'lime-green',
    'yellow',
  ]

然后我循环遍历该数组，并在其中执行另一个 for 循环以生成每种颜色 3 个 div，如下所示:

  const markup = `
    <ul>
        ${colors.map(color => `<li class='box bg-${color}'>Color</li>`)}
    </ul>
  `;

  // loop through the colours
  for (i = 0; i < colors.length; i++) { 

    // for each colour, generate 3 div elements
    for (j = 0; j < 3; j++) {
      console.log(j, 'j')
      document.body.innerHTML = markup;
    }

  }

虽然它只是生成 1 个 div，而不是 3 个。我该如何解决这个问题？

链接到Codepen

注意:如果您注释掉 Javascript，您将看到所需的结果。

Answer 1

你想要这样吗？

(function() {

  const colors = [
    'betpawa-green',
    'lime-green',
    'yellow',
  ]

  // loop through the colours

  for (i = 0; i < colors.length; i++) {
    for(j = 0; j < 3; j++) {
      document.body.innerHTML += `<div class="box bg-${colors[i]}">${j}</div>`
    }
  }

})();