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

前端技术 2023/09/01 JavaScript

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

本文地址：https://www.stayed.cn/item/2247

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案