代办事项

时间：2019-09-23 09:12:08 阅读：96 评论：0 收藏：0 [点我收藏+]

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

代办事项

原文：https://www.cnblogs.com/tcq43356/p/11570067.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)