Question

我的mkRow()功能根本不起作用，我想知道原因。我试过让按钮附加一个简单的<h1>Hello</h1>并且它工作正常，但是当我尝试这个时它就失败了

我的HTML：

<html>
<head>
    <title>Testing</title>
</head>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="stylo.css">
    <script type="text/javascript" src="functions.js"></script>
<body>
    <div class="container" id="main">
        <div class="row">
            <div class="col-sm-12" id="Header">
                <h1>Todo List</h1>
            </div>
        </div>

        <div class="row" id="row1">
            <div class="col-sm-2"></div>

            <div class="col-sm-2 not-done item">
                <div class="boton btnleft"><</div>
                <p>what</p>
                <div class="boton btnright">></div>
            </div>

            <div class="col-sm-1"></div>

            <div class="col-sm-2 in-progress item">
                <div class="boton btnleft"><</div>
                <p>what</p>
                <div class="boton btnright">></div>
            </div>

            <div class="col-sm-1"></div>

            <div class="col-sm-2 done item">
                <div class="boton btnleft"><</div>
                <p>what</p>
                <div class="boton btnright">></div> 
            </div>

            <div class="col-sm-2"></div>
        </div>
    </div>

</body>
</html>

我的.js文件：

$(document).ready(init);
var rows = 0;

function init(){
    $(".btnright").on('click', mkRow);
    $(".btnleft").on('click', moveLeft);
}

function mkItem(content){
    var protoItem = '<div class="col-sm-2 item"><div class="boton btnleft"><</div><p>' + contenido + '</p><div class="boton btnright">></div></div>';
    return protoItem;
}

function getRows(){
    rows++;
    return rows;
}

function mkRow(){

    $("#main").append('
        <div class="row" id="row' + getRows + '">
            <div class="col-sm-2"></div>
            <div class="col-sm-2 not-done item">
                <div class="boton btnleft"><</div>
                <div class="boton btnright">></div>
            </div>

            <div class="col-sm-1"></div>

            <div class="col-sm-2 in-progress item">
                <div class="boton btnleft"><</div>
                <div class="boton btnright">></div>
            </div>

            <div class="col-sm-1"></div>

            <div class="col-sm-2 done item">
                <div class="boton btnleft"><</div>
                <div class="boton btnright">></div> 
            </div>

            <div class="col-sm-2"></div>
        </div>');

}

function moveRight(){
    //
}

 function moveLeft(){
    //
}

Answer 1

使用.append()或.html()时，您可以将其设置为一行或更多行，您需要使用+符号

.append('<div>'+
           '<span>'+
           '</span>'+
        '</div>';
        );

追加行Jquery / Bootstrap

1 个答案: