追加する要素に動的位置を追加

ボディのdiv on clickを生成しようとしており、動的に位置を割り当てようとしています。ユーザがクリックする場所にdivを生成する必要があります。追加する要素に動的位置を追加

クリックの位置を取得していますが、現在生成されている要素に割り当てる方法がわかりません。

ありがとうございます。

$('body').on('click', function(e) { 
 
    $('body').append("<div class='bubble'></div>"); 
 
    console.log(e.pageX, e.pageY); 
 
    $('bubble').css({ 
 
     'top': e.pageX, 
 
     'left': e.pageY 
 
    }); 
 

 
});

*{ transition: all 0.5s ease; } 
 
html, 
 
body{ 
 
    height:100%; 
 
    width: 100%; 
 
} 
 
.bubble{ 
 
    height: 100px; 
 
    width: 100px; 
 
    background: #99c8fd; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<body>Click here</body>

出典

2016-09-15 Vipin Raunchhela

それを追加し、設定されたCSSルールでjQuery(html,attributes)を使用してjQueryオブジェクトを作成します。

$('body').on('click', function(e) { 
 
    var elem = $("<div />", { 
 
    "class": "bubble" 
 
    }).css({ 
 
    'top': e.pageY, 
 
    'left': e.pageX 
 
    }); 
 
    $('body').append(elem); 
 
});

* { 
 
    transition: all 0.5s ease; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.bubble { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: #99c8fd; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<body>Click here</body>

出典

2016-09-15 13:03:23 Satpal

@GoneCoding、私はOPのコード – Satpal

に何の問題を使用しない、ことを逃した：あなたは、彼が実際にそれが横:) –

感謝の男であることを意味している可能性が...知っていることはありません、あなたが作っ私の一日 –

追加する要素に動的位置を追加

答えて

関連する問題