javascript - 清除已完成任务按钮待办事项列表-6ren

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

转载作者：行者123 更新时间：2023-11-29 21:36:52

我一直在使用 jQuery 制作一个简单的待办事项列表，但遇到了一些问题。我创建了一个运行良好的编辑按钮，但我想要它以便在我按下回车键时文本框变为未选中状态并且文本不再可编辑，直到再次单击编辑按钮。

我还尝试添加一个清除已完成按钮，该按钮将清除所有“已检查”项目，但似乎无法定位要删除的正确项目。任何提示将不胜感激!

$(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>

最佳答案

对于您的查询:

我想要这样，当我按下回车键时，文本框变为未选中状态，文本不再可编辑，直到再次单击编辑按钮。

使用这段代码:

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

Clear Completed 按钮将清除所有“已选中”项目，但似乎无法定位要删除的正确项目。
您的代码有误。您需要使用 #clear 而不仅仅是 clear。
```
//clear all completed tasks
$(document).on("click", '#clear', function() {
  $(".done:checked").each(function () {
    $(this).closest("li").remove();
  });
})
```

查看最终工作代码段:

$(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;
    }
  });
});

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/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>

关于javascript - 清除已完成任务按钮待办事项列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34613078/

文章推荐： javascript - Roundcube java 脚本 `beforelogin` 事件钩子(Hook)

文章推荐： android - 处理多个大位图时内存不足

文章推荐： javascript - 地理定位功能错误不起作用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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