當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签

發(fā)布時間：2024/7/5 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

最終結(jié)果如下，輸入內(nèi)容增加標簽并且可以刪除，上下移動：

代碼賞析：

<!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");
// 按鈕點擊事件 $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.刪除上移動下移動 $list.delegate("a","click",function(){ // 根據(jù)class 的名稱判斷到底是哪一個按鈕 var sClassName = $(this).prop("class");
// 根據(jù)按鈕做出選擇 if(sClassName =="del"){//刪除 $(this).parent().remove();
}else if(sClassName =="up"){//上移動 // 父元素 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>學習html</span><ahref="javascript:;"class="up"> ↑</a><a href="javascript:;"class="down"> ↓</a><a href="javascript:;"class="del">刪除</a></li> <li><span>學習css</span><ahref="javascript:;"class="up"> ↑</a><a href="javascript:;"class="down"> ↓</a><a href="javascript:;"class="del">刪除</a></li> <li><span>學習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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。