我使用 JavaScript 动态创建一行。然后我不知道如何将两个球放在距离开始的 1/3 长度和距离末端的 1/3 长度上。请看下图。 我希望当我在输入框中按 enter 时出现两个球。我尝试使用附加但显然这不起作用。下面的代码是html、css、js代码。希望有人能帮助我。提前谢谢你。
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
<div id = "output">
</div>
<div id = "user">
<input type="text" id="input"><br><br>
</div>
</body>
</html>
CSS:
.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
display: block;
margin-right: 20px;
}
#output {
width: 300px;
height: 200px;
position:absolute;
float:left;
}
.line {
width: 125px;
height: 80px;
float:left;
margin-right: 20px;
}
#user {
position:relative;
z-index:99;
top:50px;
}
#ball{
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
js:
$(document).ready(function() {
make();
$("#input").keyup(function(event){
if(event.keyCode == 13){
//$('#hr1').css("border-bottom-color", "red");
/*how to put the ball on the line*/
}
});
});
function make() {
var one = document.createElement('div');
one.className = "line";
var hr = document.createElement('hr');
hr.className = "deco";
hr.id = "hr" + 1;
one.append(hr);
$('#output').append(one);
}
最佳答案
刚刚根据要求修改了您的代码。
类 line 不需要 div。
如果你想从 js 中附加球，你可以将它们包含在 js 中。
希望对你有帮助。
$(document).ready(function() {
make();
$("#input").keyup(function(event){
if(event.keyCode == 13){
$('#hr1').css("border-bottom-color", "red");
$('.ball').css("display", "inline-block");
}
});
});
function make() {
var hr = document.createElement('hr');
hr.className = "deco";
hr.id = "hr" + 1;
$('#output').prepend(hr);
}.deco {
border-bottom: 1px solid black;
width: 100%;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
display: block;
margin-right: 20px;
}
#output {
position: relative;
width: 125px;
}
#user {
position:relative;
z-index:99;
top:50px;
}
.ball{
display: none;
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
position: absolute;
top: -5px;
z-index: 100;
}
.first-ball {
left: calc(33.3% - 10px);
}
.second-ball {
right: calc(33.3% - 10px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id = "output">
<div class="ball first-ball"></div>
<div class="ball second-ball"></div>
</div>
<div id = "user">
<input type="text" id="input"><br><br>
</div>关于javascript - 将元素放在(不追加)动态创建的 div 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40756398/