利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签
生活随笔
收集整理的這篇文章主要介紹了
利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
最終結(jié)果如下，輸入內(nèi)容增加標(biāo)簽并且可以刪除，上下移動(dòng)：
代碼賞析：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> .list_con{ width:600px; margin:50pxauto 0; } .inputtxt{ width:550px; height:30px; border:1pxsolid #ccc; padding:0px; text-indent:10px;??????????? } .inputbtn{ width:40px; height:32px; padding:0px; border:1pxsolid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1pxsolid #ccc; }
.list li span{ float:left; }
.list li a{ float:right; text-decoration:none; margin:010px; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ // 1.獲取元素 var $inputTxt = $("#txt1"); var $addBtn = $("#btn1"); var $list = $("#list");
// 按鈕點(diǎn)擊事件 $addBtn.click(function(){
// 2.判斷是否為空 var sContent = $inputTxt.val(); if(sContent == ""){ alert("請輸入內(nèi)容"); return; }
// 3.將新增的內(nèi)容 添加到列表 // ul 加 li 內(nèi)部增加 var sNewContent = $('<li><span>'+ sContent +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>'); $list.append(sNewContent); // 清空輸入框 $inputTxt.val(""); })
// 4.刪除 上移動(dòng) 下移動(dòng) $list.delegate("a","click",function(){ // 根據(jù)class 的名稱 判斷 到底是哪一個(gè)按鈕 var sClassName = $(this).prop("class");
// 根據(jù)按鈕做出選擇 if(sClassName =="del"){//刪除 $(this).parent().remove();
}else if(sClassName =="up"){//上移動(dòng) // 父元素 var $currentLi = $(this).parent(); // 前元素 var $preLi = $currentLi.prev();
// 5.判斷 到頭 和到尾 if($preLi.length == 0){ alert("到頂了"); return; } // 交換位置 $currentLi.insertBefore($preLi); }else if(sClassName =="down"){//向下 // 父元素 var $currentLi = $(this).parent(); // 前元素 var $preLi = $currentLi.next();
// 5.判斷 到頭 和到尾 if($preLi.length == 0){ alert("到底了"); return; } // 交換位置 $currentLi.insertAfter($preLi); } })
}) </script>
</head> <body>
<div class="list_con"> <h2>To do list</h2> <input type="text" name="" id="txt1"class="inputtxt"> <input type="button" name="" value="增加"id="btn1" class="inputbtn"> <ul id="list"class="list">
<li><span>學(xué)習(xí)html</span><ahref="javascript:;"class="up"> ↑</a><a href="javascript:;"class="down"> ↓</a><a href="javascript:;"class="del">刪除</a></li> <li><span>學(xué)習(xí)css</span><ahref="javascript:;"class="up"> ↑</a><a href="javascript:;"class="down"> ↓</a><a href="javascript:;"class="del">刪除</a></li> <li><span>學(xué)習(xí)javascript</span><ahref="javascript:;"class="up"> ↑</a><a href="javascript:;"class="down"> ↓</a><a href="javascript:;"class="del">刪除</a></li>
</ul>
</div> </body> </html>
總結(jié)
以上是生活随笔為你收集整理的利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js获取元素的方法与属性
- 下一篇： 微信小程序正则判断姓名和手机号