1

在我创建待办事项列表应用程序的冒险中，我遇到了另一个问题。在我的代码中，每次用户点击New Category一个新的div都会出现他们的自定义名称和表单数量。

然而，当另一个div被创建时，它的形式被赋予前一个div。这是代码：

    <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type='text/javascript' src="script.js"></script>
<script>
$(function() {
  $("#new").click(function() {
    var canContinue = true;
    var newCategory = prompt("Enter the name you want for your category:");
     if(newCategory.length === 0){
      confirm("A new category can not be created - nothing was entered in the text area.");
      canContinue = false;
      }
    if(canContinue){
    var categorySections = prompt("Enter the number of sections needed for this category:");
    $("body").append("<div id = \"newDiv\"><p>" + newCategory + "</p></div>");
    }

     for(var i = 0; i < categorySections; i++){
      $("#newDiv").append("<form> Thing to do: <input type = \"text\"></form><br>");
     }
    });
});
</script>

this因此，我尝试使用在准备好之后创建表单的关键字创建一个单独的函数div，但现在根本没有创建任何表单！

这是代码：

 $(function(){
$("#newDiv").ready(function() { 
 for(var i = 0; i < categorySections; i++){
      $(this).append("<form> Thing to do: <input type = \"text\"></form><br>");
     }
});
});

那么，如何为每个单独的表单创建表单div？

4

2 回答 2

0

您重复创建具有相同 ID 的 div。(a) 这是不合法的，并且 (b) 如果你仍然这样做，你的$(#newDiv)选择器将始终适用于第一个。

此外，您将附加到支票#newDiv之外。if (canContinue)

尝试：

if(canContinue){
  var categorySections = prompt("Enter the number of sections needed for this category:");
  var newDiv = $("<div>").appendTo($(document.body));
  var header = $('<p>').text(newCategory).appendTo(newDiv);

  for(var i = 0; i < categorySections; i++){
    newDiv.append("<form> Thing to do: <input type = \"text\"></form><br>");
  }
}
于 2013-08-18T00:38:01.497 回答
0

jsFiddle

您不能newDiv多次使用 ID，HTML ID 必须是唯一的。此外，您的流程可以稍微清理一下，如下所示。

$(function () {
    $("#new").click(function () {
        var newCategory = prompt("Enter the name you want for your category:");
        if (newCategory.length === 0) {
            confirm("A new category can not be created - nothing was entered in the text area.");
            return false;
        }
        var categorySections = prompt("Enter the number of sections needed for this category:");
        var $div = $("<div />", {
            html: "<p>" + newCategory + "</p>"
        });
        $("body").append($div);

        for (var i = 0; i < categorySections; i++) {
            $div.append("<form> Thing to do: <input type='text'/></form><br>");
        }
    });
});
于 2013-08-18T00:39:21.850 回答