$(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>大家好。 这里我有一个 div，并且通过 Math.Random 出现了一些潜水。现在我需要它们像我在页面开头的那样上升。 此外，当我单击第一个且仅单击第二个 div 时，会有一个输入和值 +1。但诀窍在于，在前 2 个 div 之后，单击其余的 div，输入值保持不变。 如果你能告诉我如何解决这个问题，我会很高兴
最佳答案
首先 - 你的问题很不清楚 - 所以我希望我理解你。
一个。您希望所有 div 冒泡 - 那么您为什么要使用 getElementById ？
这将始终只返回一个元素+您在间隔之前执行此操作，因此它始终是相同的。尝试:
setInterval(function(){
$('.bubble').each(function(){
var e = this;
var eLeftPos = e.offsetTop;
e.style.top = (eLeftPos - s) + 'px';
})
}, 200);
只计算原始 div 上的点击次数 - 这是因为您将点击设置为仅在只有一个 div 可用的情况下加载。尝试:
$(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("");
});
});
关于javascript - 通过jquery制作div，需要它们也向上移动，就像在游戏中一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41084806/