Question

在我创建待办事项列表应用程序的冒险中，我遇到了另一个问题。在我的代码中，每次用户点击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创建表单？

Answer 1

您反复创建具有相同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>");
  }
}

Answer 2

jsFiddle

您无法多次使用ID newDiv，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>");
        }
    });
});

在每个新的<div> </div>中添加新表单时遇到困难

2 个答案: