By Jquery making divs, need them also to move up, like in a game
Question
$(document).ready(function(){ console.log(document.getElementById("aDiv").offsetTop); var e = document.getElementById("aDiv"); var s = 1; setInterval(function(){ var eLeftPos = e.offsetTop; // console.log(eLeftPos); e.style.top = (eLeftPos - s) + 'px'; }, 200); // Animation (function makeDiv(){ var divsize = 30; var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); $newdiv = $('<div/>',{ "class": "bubble theRestBubbles", "id": "bDiv" }).css({ 'width':divsize+'px', 'height':divsize+'px', 'background-color': color, 'border-radius' : 50 + "%", // 'class' : 'bubble', }); var posx = (Math.random() * ($(document.getElementById("mainBlock")).width())).toFixed(); $newdiv.css({ 'position':'absolute', 'left':posx+'px', 'top':370+'px', 'display':'none' }).appendTo( '#mainBlock' ).fadeIn(1000).delay(00, function(){ // $(this).remove(); makeDiv(); }); })(); }); $(document).ready(function(){ $(".bubble").click(function(){ // $("input").append(" <b>Appended text</b>"); var x = document.getElementById("input").value; var y = (parseInt(x, 10) || 0) + 1; x = y; console.log(x); $('#input').val(x); var currentPosition = this.offsetTop; console.log(currentPosition); this.style.top = "370px"; }); $(".btn-danger").click(function(){ $('#input').val(""); }); });
.bg{ height: 400px; /*width: 400px;*/ background-color: #FFF1F1; /*display: inline-block;*/ position: relative; } .bubble{ height: 30px; width: 30px; border-radius: 50%; background-color: #24E93E; cursor: pointer; position: absolute; bottom: 0; left: 0; }
<!DOCTYPE html> <html> <head> <title>Game</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="js/js.js"></script> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="container"> <div class="row text-center"> <div class="col-xs-3 btnDiv"> <button type="button" class="btn btn-danger">RESET</button> <button type="button" class="btn btn-success">PLAY</button> </div> <div class="col-xs-6 bg main-block" id="mainBlock"> <div class="bubble testBubble" id="aDiv"></div> </div> <div class="col-xs-3 score-place"> <input id="input" type="text" name="" placeholder=""> </div> </div> </div> </body> </html>
Hi All. Here I have a div, and by Math.Random a little dives are appearing. Now I need them to go up like the one I have at the beginning of the page. Also When I click on the first and only the second div, there is a input, and the value +1. But the trick is that after first 2 divs, on clicking the rest ones, the value of input stays the same. Will be glad if you will tell me how to solve this problem
1 answers
solution1
0 ACCPTED 2016-12-11 09:52:15
first of all - you're question is very unclear - so I hope I understood you.
a. you want all the div s to bubble up - so why did you use getElementById ? this will always return only one element + you do it before the interval so it's always the same one. try:
setInterval(function(){
$('.bubble').each(function(){
var e = this;
var eLeftPos = e.offsetTop;
e.style.top = (eLeftPos - s) + 'px';
})
}, 200);
b. only clicks on the original div are counted - that is because you set the click only on load where there is only one div available. try:
$(document).ready(function(){
$('.container').on('click',".bubble",function(){ // this is the only line I changed
// $("input").append(" <b>Appended text</b>");
var x = document.getElementById("input").value;
var y = (parseInt(x, 10) || 0) + 1;
x = y;
console.log(x);
$('#input').val(x);
var currentPosition = this.offsetTop;
console.log(currentPosition);
this.style.top = "370px";
});
$(".btn-danger").click(function(){
$('#input').val("");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.