javascript - list 应用程序一次添加三项而不是一项

Question

此外，如果我将脚本与 html 放在同一个文件中，最终会一次添加两个项目，而不是三个。

var itemNum = 1;
$("document").ready(function() {
  $("#addCL").click(function() {
    var itemId = "c" + itemNum;
    var itemVal = $("#itemText").val();
    $("#clItems").append("
<p>
  <input type='checkbox' id='" + itemId + "' />
  <label style='font-weight:bold; color:black' for=" + itemId + ">" + itemVal + "</label>
</p>");
    itemNum++;
  });
  $("body").on('change', 'input[type=checkbox]', function() {
    if (this.checked) {
      $("label[for=" + this.id + "]").css("text-decoration", "line-through").css('font-weight', 'normal').css('color', 'black');
      $('itemText').text('');
    } else {
      $("label[for=" + this.id + "]").css("text-decoration", "none").css('font-weight', 'bold').css('color', "black");
    }
  });
});

<div id="content">
  <h3>Today's To-Do</h3>
  <input type="text" id="itemText" />
  <input type="button" id="addCL" value="Add Item" />
  <div id="clItems"></div>
</div>

Answer 1

这是工作示例。我建议在使用 HTML 标记时仅在 JavaScript 字符串中使用单引号字符以避免混淆。

var itemNum = 1;

$(function() {
  $('#addCL').click(function() {
    var itemId = 'c' + itemNum;
    var itemVal = $('#itemText').val();
    $("#clItems").append('<p><input type="checkbox" id="' + itemId + '" /><label style="font-weight:bold; color:black" for="' + itemId + '">' + itemVal + '</label></p>');
    itemNum++;
  });
  $('body').on('change', 'input[type=checkbox]', function() {
    if (this.checked) {
      $('label[for=' + this.id + ']').css({
        'text-decoration': 'line-through',
        'font-weight': 'normal',
        'color': 'black'
      });
      $('itemText').text('');
    } else {
      $('label[for=' + this.id + ']').css({
        'text-decoration': 'none',
        'font-weight': 'bold',
        'color': 'black'
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="content">
  <h3>Today's To-Do</h3>
  <input type="text" id="itemText" />
  <input type="button" id="addCL" value="Add Item" />
  <div id="clItems"></div>
</div>