Question

我最近学会了jQuery，并希望用它创建一个小的待办事项列表。但是我被困在这里因为我无法继续将我声明的数组打印到HTML文档中。

无法真正找出原因，非常感谢任何帮助！

以下是代码：http://jsfiddle.net/xbili/vwjp2/4/

我真的不明白为什么不能这样做：

 for (var i = 1; i <= x; ++i) {
     $("main").text(toDoList[i]);
 };

Answer 1

更改您的代码：

$(document).ready(function () {
    $(".navButtonTBD, .navButtonD").click(function () {
        $("main").html('<input class="inputBar" type="text" placeholder="what to do?" /> <input class="toDoIt" type="submit" value="To-Do it!" />');

    });

   $(document).on("click", ".toDoIt" , function () {
            $("main").append("<p>" + $(".inputBar").val() + "</p>");
        });

});

以下是fiddle

原始代码上有多个错误，例如：

$(".inputBar").val()=toDoList[x];

我猜你试图在数组中存储值，但这不是怎么做的，你可以改为使用：

toDoList.push($(".inputBar").val());

然而，没有必要这样做，因为您可以继续使用以下方式附加到您的投币手：

  $("main").append("<p>" + $(".inputBar").val()  + "</p>" );

Answer 2

这是你最终目标的工作版本的小提琴：

JSFIDDLE

我通过添加光标样式清理了css，但我保留了你的HTML。

$(document).ready(function() {
    var toDoList = [];
    $(".navButtonTBD").click(function() {
        $("main").html('<input class="inputBar" type="text" placeholder="what to do?" /> <input class="toDoIt" type="submit" value="To-Do it!" />')
    });

    $(document.body).on('click', '.toDoIt', function() {

        toDoList.push($('.inputBar').val());
        var newhtml = "";
            for(var i=0;i<toDoList.length;i++) {
               newhtml += toDoList[i]+"<br>";
            };
            //Print out toDoList below
            $("main").html(newhtml);
        });

});

在网页上使用jQuery打印出一个数组

2 个答案: