javascript - 为什么我不能将 ES6 模板文字与 .css() 方法一起使用？

Question

我正在动态创建网格 block ，我需要动态更改每个 block 的颜色。我正在使用 jQuery 和 ES6，但我目前遇到动态更改颜色的问题。

这是我的代码:

$(document).ready(function() {
  let y = new Array(20);
  let x = new Array(29);
  let colors = Array.of('red','green','orange','pink','purple');
  let xCoordinate = 20
  for (let block of x) {
    let randomColor = colors[Math.floor(Math.random() * colors.length)];
    let gridBlock = $(`<div class='blockattribute' style=left:${xCoordinate}px></div>`);
    gridBlock.addClass('topcoordinate');
    gridBlock.css(`{background-color:${randomColor}}`);
    $('#colorgrid').append(gridBlock);
    xCoordinate += 20;
  }
});

我遇到的问题是这部分gridBlock.css({background-color:${randomColor}});这段代码根本没有设置颜色。我在这里遗漏了什么吗？

Answer 1

因为你正在通过这个

`{background-color:${randomColor}}`

它将成为一个字符串(而不是一个对象)

'{background-color:YOUR_COLOR}'

但是css()需要一个像这样的属性对象

element.css({ 'background-color': 'red' })

意味着你应该这样做

gridBlock.css({ 'background-color': randomColor })

或者你可以传递 2 个字符串，例如

gridBlock.css('background-color', randomColor);

此用例实际上并不需要模板字符串。