1

To Do リスト アプリケーションを作成するという冒険の中で、別の問題に遭遇しました。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

jsフィドル

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>");
        }
    });
});
于 2013-08-18T00:39:21.850 に答える