以下是使用
jQuery实现待办事项的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Todo List</title>
<script src="https://code.
jquery.com/
jquery-3.5.1.min.js"></script>
<style>
.completed {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>
Todo List</h1>
<input type="text" id="
todoInput" placeholder="Add a new task">
<ul id="
todoList">
<!-- Existing tasks will be added dynamically here -->
</ul>
<script>
// Load saved data on page load
$(document).ready(function() {
load();
});
// Add new task when Enter key is pressed
$("#
todoInput").on("keydown", function(event) {
if (event.keyCode === 13) {
var task = $(this).val();
addTask(task);
$(this).val("");
}
});
// Add new task to the
list
function addTask(task) {
var
listItem = $("<li>").text(task);
var checkbox = $("<input>").attr("type", "checkbox");
checkbox.on("click", function() {
$(this).parent().toggleClass("completed");
saveData();
});
listItem.prepend(checkbox);
$("#
todoList").append(
listItem);
saveData();
}
// Save data to local storage
function saveData() {
var tasks = [];
$("#
todoList li").each(function() {
var task = {
text: $(this).text(),
completed: $(this).hasClass("completed")
};
tasks.push(task);
});
localStorage.setItem("
todoData", JSON.stringify(tasks));
}
// Load data from local storage
function load() {
var data = localStorage.getItem("
todoData");
if (data) {
var tasks = JSON.parse(data);
for (var i = 0; i < tasks.length; i++) {
var
listItem = $("<li>").text(tasks[i].text);
if (tasks[i].completed) {
listItem.addClass("completed");
listItem.prepend($("<input>").attr("type", "checkbox").prop("checked", true));
} else {
listItem.prepend($("<input>").attr("type", "checkbox"));
}
$("#
todoList").append(
listItem);
}
}
}
</script>
</body>
</html>
```
这个示例代码
实现了
一个简单的
待办事项列表。用户可以在
输入框中输入新的任务，并按Enter键
添加到列表中。每个任务都有
一个复选框，用户可以勾选完成任务。已完成的任务会有删除线样式。所有的任务数据都会保存在浏览器的本地存储中，以便在页面重新加载时恢复数据。
2.回车后统一存放在正在进行中
2386
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
