javascript - 如何在内联CSS中使用jquery变量

Question

我有一个脚本，我想在用户点击的地方生成我的 div，并且那个 div 留在那里，所以现在我有了这个 jquery 脚本

$(document).ready(function() {
    $('body').click(function(e) {
        var offset = $(this).offset();
        $('#x_axis').html(e.clientX - offset.left);
        var x = (e.clientX - offset.left);
        $('#y_axis').html(e.clientY - offset.top);
        var y = (e.clientY - offset.top);
        $('body').append('<div id="bloom" style="position: relative; left: HERE I WANT TO PLACE X;">asd</div>');
        $('#bloom').css('left', x);
        $('#bloom').css('top', y);
    });
});

现在在这一行中，我想将我的 X 和 Y 变量添加到左侧和顶部属性:

            $('body').append('<div id="bloom" style="position: relative; left: HERE I WANT TO PLACE X;">asd</div>');

知道如何做到这一点吗？？或者任何更好的方法来实现这一点，当用户点击页面的每个部分时，div 会在那里生成

Answer 1

你可以为此使用模板文字

解决方案

  $('body').append(`<div id="bloom" style="position: relative; left: ${x};">asd</div>`);

More about template literals