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

【问题标题】：Why can't I use ES6 template literals with .css() method?为什么我不能将 ES6 模板文字与 .css() 方法一起使用？
【发布时间】：2017-03-13 05:58:14
【问题描述】：

我正在动态创建网格块，我需要动态更改每个块的颜色。我正在使用 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}}); 这个代码根本没有设置颜色。我在这里遗漏了什么吗？

【问题讨论】：

gridBlock.css({"background-color":randomColor}); - .css() 方法需要一个对象或两个字符串，而不是包含 {} 的字符串。

标签： javascript jquery css ecmascript-6

【解决方案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);

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

【讨论】：

【解决方案2】：

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

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

而且你根本不需要模板文字。

gridBlock.css({backgroundColor:randomColor});

【讨论】：

你为什么说:`${randomColor}`而不是:randomColor？