为什么我不能使用ES6模板字面值与.css()方法

Why can't I use ES6 template literals with .css() method?

本文关键字：字面值 css 方法 不能 ES6 为什么      更新时间：2023-09-26

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

因为你要传递这个

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

将变成字符串(不是对象)

'{background-color:YOUR_COLOR}'

但是css()需要像

这样的属性对象
element.css({ 'background-color': 'red' })

意思是你应该做

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

或者你可以传递两个字符串，比如

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

这个用例并不需要模板字符串

仅使用模板文字表示颜色，camelCase表示带连字符的属性

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

你根本不需要模板字面量

gridBlock.css({backgroundColor:randomColor});
相关文章：