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变量添加到left和top属性：

            $('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

Answer 2

您可以连接变量

例如：

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

或

使用模板文字

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

Answer 3

您可以通过调整''

直接放置

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

Answer 4

您可以采用以下格式连接javascript变量：

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

如何在嵌入式CSS中使用jquery变量

4 个答案: