Question

我正在动态创建网格块，我需要动态更改每个块的颜色。我正在使用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);

您不需要此用例的模板字符串。

Answer 2

将模板文字用于仅颜色，将 camelCase 用于连字符属性

var img = body.getChild(imgLocations[intX][0]).asParagraph().getChild(imgLocations[intX][1]);

你根本不需要模板文字。

gridBlock.css({backgroundColor:`${randomColor}`});

为什么我不能将ES6模板文字与.css（）方法一起使用？

2 个答案: