1、概述
实现像手机便签一样功能的简易版备忘录页面，该备忘录全部用JQuery提供的功能实现，非常简单易懂。
2、功能介绍
（1）简洁的页面，主界面仅提供两个按钮用于添加和删除记录;
（2）添加完成的多条记录，支持批量选择删除；
（3）每条记录支持点击行内进行修改;
（4）支持任意操作步骤进行修改、添加、删除功能;
3、实现原理
预先定义一个空的无序列表，
（1）添加记录：利用JQuery的append();方法，在空的ul列表内添加记录，并同时添加一个确定按钮；
（2）修改记录：ui下li标签绑定点击事件，使用val();方法获取内容并将其转换为多行文本输入框；
（3）删除记录：使用hasClass方法定义单选框，如果被选中则remove();移除列表；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易版备忘录</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/简易版备忘录.css">
</head>
<body>
<div class="aide">
<button class="add">+</button>
<h2>备忘录</h2>
<button class="delete">×</button>
<hr>
<ul></ul>
</div>
<script type="text/javascript">
$(function(){
$(".add").on("click",function(){
/**
* 备忘录内添加1条记录;
*/
$("ul").append("<li><textarea></textarea><button class='sub'>确定</button></li>");//点击添加按钮，在ul内添加一个多行输入文本框和一个按钮;
$("ul").on("click" ,"li .sub",function(){
var text=$(this).parent().children("textarea").val();//获取多行输入文本框内的值;
$(this).parent().html("<div></div>"+"<p>"+text+"</p>");//将获取到的输入内容转换为段落格式,同时在内容前添加一个单选圆圈;
})
/**
* 修改点击的记录;
*/
$("ul").on("click","li p",function(){
var textarea=$(this).parent().children("p").val();//获取段落标签内的值;
$(this).parent().html("<textarea>"+textarea+"</textarea><button class='sub'>确定</button>");//将获取到的段落标签内的值转换为标签文本，并同时添加一个确定按钮;
})
$("ul").on("click","li div",function(){
if($(this).hasClass("on")){
$(this).removeClass("on");//如果单击时单选被选中，则移除选中效果;
}else{
$(this).addClass("on");//否则添加选中效果;
}
$(".delete").on("click",function(){
$(".on").parent().remove();//删除选中的记录;
})
})
})
})
</script>
</body>
</html>
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
