Question

我使用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);
}

Answer 1

根据要求修改代码。

不需要课程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>

将元素放在（不附加）动态创建的div

1 个答案: