2021-08-16前端todolist实现js文件

/* 
	需求：
	功能1：在输入框中输入任务内容，按回车键时添加一个任务（20分）
		要求1：添加到任务列表的最顶部
		要求2：添加完成后，需要清空原来的内容。
		要求3：要有非空的判断，如果任务内容为空，alert提示 "任务名称不能为空"
	功能2：任务删除功能，点击任务中的删除按钮，能够删除当前任务（10分）
	功能3：任务状态修改功能，点击checkbox，要求能够修改任务的完成状态。（10分）
		提示：当checkbox选中时，需要给li添加completed类， 当checkbox不选中时，需要移除completed类
	提示1：当checkbox选中时，需要给li添加completed类， 当checkbox不选中时，需要移除completed类
	提示2：详细功能参照素材提供的gif图。

*/
$(function () {
	// 开始你的表演....
	// [{info: "嘻嘻", done: true}]
	//1.遍历原有数据
	let dataArr = JSON.parse(localStorage.getItem('todolist')) || []
	load()
	function load() {
		//清空数据
		$('.todo-list').empty()
		dataArr.forEach(function (obj, index) {
			//创建
			let theLi = $(`<li class=${obj.done?'completed':'' }>
			<input class="toggle" type="checkbox" ${obj.done ? 'checked' : ''}>
			<label>${obj.info}</label>
			<button class="destroy" idx=${index}></button>
		</li>`)
			//向前添加数据
			$('.main .todo-list').prepend(theLi)
			// if (obj.done) {
            //     $(theLi).addClass('completed')
            //     $(theLi).find('.toggle').prop('checked', true)
            // }
		})
	}
	//2.获取表单中input
	// 在输入框中输入任务内容，按回车键时添加一个任务
	$('.header .new-todo').on('keyup', function (e) {
		if (e.keyCode === 13 && $(this).val().trim().length > 0) {
			let val = $(this).val()
			let newObj = {
				info: val,
				done: false
			}
			dataArr.push(newObj)
			$(this).val('')
			localStorage.setItem('todolist', JSON.stringify(dataArr))
			load()
		}else if(e.keyCode === 13 && $(this).val().trim().length===0 ){
			alert('任务名称不能为空')
		}
	})
	//3.功能2：任务删除功能，点击任务中的删除按钮，能够删除当前任务（10分）
	$('.todo-list').on('click', '.destroy', function () {
		let index = $(this).attr('idx')
		dataArr.splice(index, 1)
		save()
		load()
	})
	//4.toggle 功能3：任务状态修改功能，点击checkbox，要求能够修改任务的完成状态。（10分）
	$('.todo-list').on('click', '.toggle', function () {
		let index = $(this).siblings('button').attr('idx')
		dataArr[index].done = !dataArr[index].done
		$(this).parent().toggleClass('completed')
		save()
		load()
	})
	function save() {
		localStorage.setItem('todolist', JSON.stringify(dataArr))
	}
});