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>