Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   При клике появлялся новый элемент (бесконечно) (https://javascript.ru/forum/dom-window/61384-pri-klike-poyavlyalsya-novyjj-ehlement-beskonechno.html)

Eadweard 16.02.2016 05:44

При клике появлялся новый элемент (бесконечно)
 
Привет всем, я еще только изучаю javascript, поэтому мне еще трудно :-E :-E . Хотелось бы сделать круг, при клике на него, появлялся новый круг, при клике на другой круг и еще один (3 круг) появлялся и так до бесконечности. Я сделал рандомное перемещение и создание клонов, но тут незадача... При клике только на один круг, появляется новый, почему-то остальные появляются, но не двигаются также как и главный, хотя должен быть идентичным.
В идеале должно: при клике на каждый круг он создает еще круг и появляются они в разном месте, при этом передвигались. Попробуем?:-?

<html>
<head> 
<title>Перемещение круга</title>
<style>
.svgcircle
{
position: absolute;
}
#circle
{
transition: 1s cubic-bezier(0, 0, 1, 1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
window.onclick = function() 
{
var circle = event.target;
circle.setAttribute("cx",Math.random()*500)
circle.setAttribute("cy",Math.random()*500)
$(".main").clone().appendTo(".container");
}
</script>
<div class="container">
<div class="main">
<svg width ="600" height ="600" class="svgcircle">
<circle id="circle" cx="35" cy="25" r="20" fill="black"/></circle>
</svg>
</div>
</div>
</body>
</html>

рони 16.02.2016 07:04

Eadweard,
для попробовать атрибут run
[HTML run][/HTML]

рони 16.02.2016 07:26

Цитата:

Сообщение от Eadweard
остальные появляются, но не двигаются

потому что id уникально!!!
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8">
<title>Перемещение круга</title>
<style>
.svgcircle
{
position: absolute;
}
.circle
{
-webkit-transition: all 10s cubic-bezier(0, 0, 1, 1);
-moz-transition:all 10s cubic-bezier(0, 0, 1, 1);
-o-transition:all 10s cubic-bezier(0, 0, 1, 1);
transition:all 10s cubic-bezier(0, 0, 1, 1);
}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<script>
$("html").on("click", ".circle" , function()
{
this.setAttribute("cx",Math.random()*500)
this.setAttribute("cy",Math.random()*500)
$(this).clone().appendTo(".svgcircle");
})
</script>
<div class="container">
<div class="main">
<svg width ="600" height ="600" class="svgcircle">
<circle class="circle" cx="35" cy="25" r="20" fill="black"/></circle>
</svg>
</div>
</div>
</body>
</html>

Eadweard 16.02.2016 08:13

Благодарю, всё так, как и хотел. Продолжу своё изучение javascript. :thanks:


Часовой пояс GMT +3, время: 19:49.