首页 > 代码库 > JS~一个列表中包含上移下移删除等功能
JS~一个列表中包含上移下移删除等功能
最近做了一个项目，包括了一个列表页，为了用户体验，操作均使用JS实现，其中包括在列表中实现上移，下移，删除等功能，前台JS，后端数据修改使用AJAX，本文主要说一下前台JS这块
先看一下页面的截图
看一下它的HTML结构，当然，这与前台切图有关，后端程序人员只负责写自己的JS这块，我以我们项目为例，看一下它们切的HTML
<ul class="clearfix"> <li class="courseList"> <div class="titDefault clearfix"> <div class="left clearfix"> <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">1</em>：</span><em title="2013年 加班.txt" class="titDefaultName">2013年 加班.txt</em> </div> <div class="mid">2014/9/24 9:54:00</div> <div class="right clearfix"> <a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a> <a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a> <a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a> </div> </div> </li> <li class="courseList"> <div class="titDefault clearfix"> <div class="left clearfix"> <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">2</em>：</span><em title="使用说明.txt" class="titDefaultName">使用说明.txt</em> </div> <div class="mid">2014/9/24 9:54:00</div> <div class="right clearfix"> <a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a> <a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a> <a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a> </div> </div> </li> <li class="courseList"> <div class="titDefault clearfix"> <div class="left clearfix"> <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">3</em>：</span><em title="占占大师.txt" class="titDefaultName">占占大师.txt</em> </div> <div class="mid">2014/9/24 9:54:00</div> <div class="right clearfix"> <a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a> <a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a> <a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a> </div> </div> </li> <li class="courseList"> <div class="titDefault clearfix"> <div class="left clearfix"> <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">4</em>：</span><em title="排序问题.txt" class="titDefaultName">排序问题.txt</em> </div> <div class="mid">2014/9/24 9:54:00</div> <div class="right clearfix"> <a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a> <a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a> <a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a> </div> </div> </li> </ul>
下面我们主要看一下JS代码，主要使用JQ的on方法实现的，原因是因为列表的数据有第一次为静态的（bind），当排序后，数据变为动态的（live），所以，这种结构只能使用on才最合理，看一下代码
<script type="text/ecmascript"> $(function () { //上移 $(".clearfix").on("click", ".moveUpBtn", function () { var self = $(this); var _old = self.closest("li.courseList"); var _new = self.closest("li.courseList").prev("li"); if (_new.length > 0) { var _temp = _old.html(); _old.empty().append(_new.html()); _new.empty().append(_temp); } }); //下移 $(".clearfix").on("click", ".moveDownBtn", function () { var self = $(this); var _old = self.closest("li.courseList"); var _new = self.closest("li.courseList").next("li"); if (_new.length > 0) { var _temp = _old.html(); _old.empty().append(_new.html()); _new.empty().append(_temp); } }); //删除 $(".clearfix").on("click", ".deleteBtn", function () { var self = $(this);//当前click事件源对象 self.closest("li.courseList").remove(); }); }); </script>
运行之后，效果就出来了，本JS中没有把与后台交互的AJAX方法写出来，大家可以根据具体情况而定。
JS~一个列表中包含上移下移删除等功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。