JS實現簡易版備忘錄
阿新 • • 發佈：2018-11-24
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>