| |
<!DOCTYPE html> |
| |
<html lang="en"> |
| |
|
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
| |
<script src="jquery-3.4.1.min.js"></script> |
| |
<title>代办事项</title> |
| |
<style> |
| |
span { |
| |
font-size: 14px; |
| |
margin-right: 10px; |
| |
color: blue; |
| |
text-decoration: underline; |
| |
cursor: pointer; |
| |
} |
| |
|
| |
.total { |
| |
color: black; |
| |
text-decoration: none; |
| |
cursor: text; |
| |
} |
| |
|
| |
.completed { |
| |
color: red; |
| |
text-decoration: line-through; |
| |
} |
| |
|
| |
li { |
| |
cursor: pointer; |
| |
} |
| |
</style> |
| |
</head> |
| |
|
| |
<body> |
| |
<input type="text" name="" id="" placeholder="新的待办事项..."> |
| |
<button id="btn">添加</button> |
| |
<ul class="list"></ul> |
| |
<span class="total">全部</span> |
| |
<span>已完成</span> |
| |
<span>未完成</span> |
| |
|
| |
|
| |
<script> |
| |
let data = [ |
| |
{ "text": "吃饭", "completed": false }, |
| |
{ "text": "看书", "completed": true }, |
| |
{ "text": "看电影", "completed": false }, |
| |
{ "text": "逛街", "completed": true }, |
| |
{ "text": "写作业", "completed": false }, |
| |
]; |
| |
|
| |
let str = ""; |
| |
let render = function (data) { |
| |
for (let i = 0; i < data.length; i++) { |
| |
str += `<li class="${data[i].completed ? "completed" : ""}">${data[i].text}</li>`; |
| |
} |
| |
$(".list").html(str) |
| |
str = ""; |
| |
} |
| |
render(data); |
| |
|
| |
$("#btn").click(function () { |
| |
let newData = { "text": $(":text").val(), "completed": false }; |
| |
$(":text").val = ""; |
| |
data.push(newData); |
| |
$("span:eq(0)").click(click1); |
| |
render(data); |
| |
}); |
| |
|
| |
let click1 = function () { |
| |
$("span").removeClass("total"); |
| |
|
| |
let content = $(this).text(); |
| |
switch (content) { |
| |
case "全部": |
| |
$(this).addClass("total"); |
| |
render(data); |
| |
break; |
| |
case "已完成": |
| |
$(this).addClass("total"); |
| |
let completed = data.filter(function (list) { |
| |
return list.completed === true; |
| |
}); |
| |
render(completed); |
| |
break; |
| |
case "未完成": |
| |
$(this).addClass("total"); |
| |
let uncomplete = data.filter(function (list) { |
| |
return list.completed === false; |
| |
}); |
| |
render(uncomplete); |
| |
break; |
| |
} |
| |
} |
| |
$("span").click(click1); |
| |
|
| |
$("ul").on("click", "li", function () { |
| |
$(this).toggleClass("completed"); |
| |
let index = $(this).index(); |
| |
if ($(this).attr("class") == "completed") { |
| |
data[index].completed = true; |
| |
} else { |
| |
data[index].completed = false; |
| |
} |
| |
|
| |
$("ul").html = ""; |
| |
|
| |
let content = $(this).text(); |
| |
switch (content) { |
| |
case "全部": |
| |
$(this).addClass("total"); |
| |
render(data); |
| |
break; |
| |
case "已完成": |
| |
$(this).addClass("total"); |
| |
let completed = data.filter(function (list) { |
| |
return list.completed === true; |
| |
}); |
| |
render(completed); |
| |
break; |
| |
case "未完成": |
| |
$(this).addClass("total"); |
| |
let uncomplete = data.filter(function (list) { |
| |
return list.completed === false; |
| |
}); |
| |
render(uncomplete); |
| |
break; |
| |
} |
| |
}); |
| |
|
| |
</script> |
| |
</body> |
| |
|
| |
</html> |
