如何使用内联HTML样式标签中的变量

Question

我正在尝试获取"left"one_answers";top"属性设置为从randomXValue"one_answers";randomYValue"这两个函数返回整数。

randomXValue = getRandomXValue();
randomYValue = getRandomYValue();
$("#gamespace").append(
'<img src="img/img.jpg" class="gameimg" style = "left: (randomXValue)px; top:
(randomYValue)px;"/>'
);

如果我输入一个整数而不是randomValue，它将显示在正确的位置。我试图让图像出现在"#gamespace">

的随机位置

Answer 1

使用模板字符串提高可读性

const left = getRandomXValue();
const top = getRandomYValue();
$("#gamespace").append(
`<img src="img/img.jpg" class="gameimg" style="left:${left}px;top:${top}px;"/>`
);

Answer 2

注意引号的放置顺序是很重要的。

在您的示例中，我们以单引号开始，用于定义字符串的开始和结束。要在字符串中插入变量，可以在任意位置插入单引号来分割字符串，并使用加号将变量与字符串连接起来。

您必须按如下方式插入变量

randomXValue = getRandomXValue();
randomYValue = getRandomYValue();
$("#gamespace").append(
'<img src="img/img.jpg" class="gameimg" style = "left: "'+randomXValue+'"px; top:"'+randomYValue+'"px;"/>'
);