Question

我一直在研究这个简单的待办事项列表，现在正处于调试阶段。在我实施不同的更改时，我观察了以下内容

将所有项目留在列表中：我添加1项，没问题。我添加2项，没有任何作用 - 无法标记完整/不完整。我添加3项，没问题。等等

刷新页面后

：我添加1项，点击它，它工作，删除它，用新项目创建一个新列表，不起作用！

我从哪里开始处理这些错误？

$(function() {
  //$('input[name=checkListItem]').focus();
  $(".list-container").hide();
  $("hr").hide();
  $(".legend").hide();

  //* Prevent empty Add from continuing function by Evaluation; It will not accept only spaces; Clear input list once add is clicked; add item & Font Awesome icon to list *//
  $("#button").click(function() {
    if ($("input[name=checkListItem]").val().trim() !== "") {
      var toAdd = $("input[name=checkListItem]").val();
      $(".list-container").fadeIn(500);
      $(".list").append(
        '<div class="item"><i class="fa fa-times" aria-hidden="true"></i><i class="fa fa-pencil" aria-hidden="true"></i>' +
          toAdd +
          "</div>"
      );
    }

    // Focus back on text input once add is clicked
    $("input[name=checkListItem]").val("").focus();

    // click the X icon to remove that item
    $(document).on("click", ".fa-times", function() {
      $(this).parent().remove();
      if ($(".item").length === 0) {
        //If container empty, hide from view
        $(".list-container").hide();
        $("hr").fadeOut(500);
        $(".legend").fadeOut(500);
      }
    });

    // click on the item to cross it out; click it again to reactivate it
    $(document).on("click", ".item", function() {
      if ($(this).css("text-decoration").split(" ")[0] !== "line-through") {
        $(this).css("text-decoration", "line-through");
        $(this).css("color", "gray");
      } else {
        $(this).css("color", "");
        $(this).css("text-decoration", "");
      }
    });

    //Only show horizontal line if a list is present
    if ($(".item").length === 0) {
      $("hr").hide();
      $(".legend").hide();
    } else {
      $("hr").fadeIn(500);
      $(".legend").fadeIn(500);
    }
  });
});

Answer 1

您的问题围绕着每次创建新操作时都要创建新绑定的事实。在使用委托绑定时，不会每次都创建它们。拉出你的todo创建逻辑之外的那些，只在页面加载时执行一次。

偶数/不均匀列表项目中断功能

1 个答案: