最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用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方法写出来,大家可以根据具体情况而定。
标签:
列表,上移,下移,删除
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JS实现一个列表中包含上移下移删除等功能”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍