Question

我一直在使用jQuery编写一个简单的待办事项列表，并遇到了一些问题。我创建了一个工作得很好的编辑按钮，但是我想要它，这样当我按下输入时，文本框将被取消选中，文本将不再可编辑，直到再次单击编辑按钮。

我还尝试添加一个Clear Completed按钮，清除所有“Checked”项目，但似乎无法定位要删除的正确项目。任何提示将不胜感激！

$(document).ready(function() {
  $("#todo").focus();

  function addItem() {
      $("#todo-items").append("<li><input type='checkbox' class='done'/><span>" + $("#todo").val() + "</span><button class='delete'>Delete</button><button class='edit'>Edit</button></li>");
      $("#todo").val("");
    }
    //add item when enter is pressed
  $("#todo").keydown(function(e) {
    if (e.which == 13)
      addItem();
  });
  //add item when "Add" is clicked
  $("#add").click(addItem);

  //make textbox content editable
  $(document).on("click", '.edit', function() {
    $(this).closest("li").find("span").prop("contenteditable", true).focus();

    //$(this).closest("span").keydown(function(e) {
    //if (e.which == 13) return false;
    //});
  })

  //delete item from list
  $(document).on("click", '.delete', function() {
      $(this).closest("li").fadeOut(function() {
        $(this).remove();
      });
      return false;
    })
    //strike-through text when checkbox is checked
  $(document).on("click", '.done', function() {
      if ($(this).closest("li").find("span").css('textDecoration') === 'line-through') {
        $(this).closest("li").find("span").css('textDecoration', 'none');
      } else {
        $(this).closest("li").find("span").css('textDecoration', 'line-through');
      }
    })
    //clear all completed tasks
  $(document).on("click", 'clear', function() {
    if ($(this).closest("li").find("span").css('textDecoration') === 'line-through') {
      $(this).parent().remove();

    }
  })

});

body {
  font: sans-serif;
  color: #00b33c;
  background-color: #ffffff;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 700px;
}
li {
  border: 2px solid #fff;
  background: #e5ffff;
  padding: 10px 10px;
  color: #000000;
  width: 500px;
}
li span {
  padding-left: 10px;
  padding-right: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script src="todolistjquery2.js"></script>

<body>

  <h1>To Do List</h1>

  <div>

    <input type="text" id="todo" />
    <input type="button" value="Add" id="add" />

  </div>

  <div id="completed">

    <input type="button" value="Clear Completed" id="clear" />


  </div>

  <ul id="todo-items"></ul>

</body>

Answer 1

您的疑问：

我想要它，以便当我按下输入时，文本框变为未选中状态，并且在再次单击编辑按钮之前文本将不再可编辑。

使用此代码：

// finalize the edited span
$(document).on("keydown", 'span[contenteditable]', function (e) {
  if (e.which == 13) {
    $(this).removeAttr("contenteditable").blur();
    return false;
  }
});

清除已完成按钮，将清除所有＆＃34;已检查＆＃34;项目，但似乎无法定位要删除的项目。

您的代码中有错误。您需要使用#clear，而不仅仅是clear。
```
//clear all completed tasks
$(document).on("click", '#clear', function() {
  $(".done:checked").each(function () {
    $(this).closest("li").remove();
  });
})
```

请参阅最终工作代码：

＆＃13;

$(document).ready(function() {
  $("#todo").focus();

  function addItem() {
    $("#todo-items").append("<li><input type='checkbox' class='done'/><span>" + $("#todo").val() + "</span><button class='delete'>Delete</button><button class='edit'>Edit</button></li>");
    $("#todo").val("");
  }
  //add item when enter is pressed
  $("#todo").keydown(function(e) {
    if (e.which == 13)
      addItem();
  });
  //add item when "Add" is clicked
  $("#add").click(addItem);

  //make textbox content editable
  $(document).on("click", '.edit', function() {
    $(this).closest("li").find("span").prop("contenteditable", true).focus();
    //$(this).closest("span").keydown(function(e) {
    //if (e.which == 13) return false;
    //});
  })
  //delete item from list
  $(document).on("click", '.delete', function() {
    $(this).closest("li").fadeOut(function() {
      $(this).remove();
    });
    return false;
  })
  //strike-through text when checkbox is checked
  $(document).on("click", '.done', function() {
    if ($(this).closest("li").find("span").css('textDecoration') === 'line-through') {
      $(this).closest("li").find("span").css('textDecoration', 'none');
    } else {
      $(this).closest("li").find("span").css('textDecoration', 'line-through');
    }
  });
  //clear all completed tasks
  $(document).on("click", '#clear', function() {
    $(".done:checked").each(function () {
      $(this).closest("li").remove();
    });
  })
  // finalize the edited span
  $(document).on("keydown", 'span[contenteditable]', function (e) {
    if (e.which == 13) {
      $(this).removeAttr("contenteditable").blur();
      return false;
    }
  });
});

＆＃13;

body {
  font: sans-serif;
  color: #00b33c;
  background-color: #ffffff;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 700px;
}
li {
  border: 2px solid #fff;
  background: #e5ffff;
  padding: 10px 10px;
  color: #000000;
  width: 500px;
}
li span {
  padding-left: 10px;
  padding-right: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="todolistjquery2.js"></script>
<h1>To Do List</h1>

<div>
  <input type="text" id="todo" />
  <input type="button" value="Add" id="add" />
</div>

<div id="completed">
  <input type="button" value="Clear Completed" id="clear" />
</div>
<ul id="todo-items"></ul>

＆＃13;

清除已完成任务按钮待办事项列表

1 个答案: