JS实现一个列表中包含上移下移删除等功能

网络编程 2024/11/19 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

最近做了一个项目，包括了一个列表页，为了用户体验，操作均使用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方法写出来，大家可以根据具体情况而定。

列表,上移,下移,删除

标签：

列表,上移,下移,删除

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“JS实现一个列表中包含上移下移删除等功能”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

JS实现一个列表中包含上移下移删除等功能

列表,上移,下移,删除

用C/C++来实现 Node.js 的模块（一）

一个JavaScript函数把URL参数解析成Json对象

评论“JS实现一个列表中包含上移下移删除等功能”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接