Question

这是Codecademy课程的一部分。这是一个Jquery课程。我无法弄清楚如何将.item附加到.list。他们没有在网站上解释，我也找不到我理解的答案。

HTML代码

    <!DOCTYPE html>
<html>
    <head>
        <title>To Do</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <h2>To Do</h2>
        <form name="checkListForm">
            <input type="text" name="checkListItem"/>
        </form>
        <div id="button">Add!</div>
        <br/>
        <div class="list"></div>
    </body>
</html>

新Jquery代码

$(document).ready(function() {
$('#button').click(function() {
    var toAdd = $('input[name=checkListItem]').val();
    $('div').append('<div class="item">' + toAdd+ '</div>');
    });
});

问题是我无法将.item添加到.list。我是一个全新的jQuery用户，所以这对我来说有点难以理解。即使在修复语法错误之后，也没有添加正确的项目。

该网站给了我这个错误：哎呀，再试一次。请务必使用.append()将.item添加到.list！

Answer 1

$('#button').click(function() {
    var toAdd = $('input[name=checkListItem]').val();
    $('div').append('<div class=".item">') + toAdd+ '</div>'; // Error on this line
});

您正在关闭功能。它应该是 -

$('div').append('<div class="item">' + toAdd+ '</div>');

Answer 2

试试这个：

$(document).ready(function() {
$('#button').click(function() {
    var toAdd = $('input[name=checkListItem]').val();
    $('.list').append('<div class="item">' + toAdd+ '</div>');
    });
});

Answer 3

您使用过的内容不会按预期附加元素。

尝试将类和文本作为对象传递，

$(document).ready(function() {
    $('#button').click(function() {
      var toAdd = $('input[name=checkListItem]').val();
      $('div.list').append($('<div>',{"class":"item","text":toAdd}));
    });
});

.append没有将.item添加到.list

HTML代码

新Jquery代码

3 个答案: