当前位置：首页 >

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

发布时间：2024/7/5 50 豆豆

生活随笔收集整理的这篇文章主要介绍了利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签小编觉得挺不错的,现在分享给大家,帮大家做个参考.

最终结果如下，输入内容增加标签并且可以删除，上下移动：

代码赏析：

<!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("请输入内容"); return; }
// 3.将新增的内容添加到列表 // ul 加 li 内部增加 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(){ // 根据class 的名称判断到底是哪一个按钮 var sClassName = $(this).prop("class");
// 根据按钮做出选择 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>

总结

以上是生活随笔为你收集整理的利用Jqurey写一个输入内容增加并且可以删除，上下移动的标签的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。