JS implements functions such as moving up, moving down, and deleting in a list_javascript skills

I recently worked on a project, including a list page. For the sake of user experience, all operations are implemented using JS, including moving up, down, deleting and other functions in the list. The front-end JS is used, and the back-end data is modified using AJAX. , this article mainly talks about the front-end JS

Take a look at the screenshot of the page first

Look at its HTML structure. Of course, this is related to the front-end cutting. Back-end programmers are only responsible for writing their own JS. Let me take our project as an example and take a look at the HTML they cut

<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>

Below we mainly look at the JS code, which is mainly implemented using the on method of JQ. The reason is that the data in the list is static (bind) for the first time. After sorting, the data becomes dynamic (live). Therefore, it is most reasonable to use on for this structure. Take a look at the code

<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>

After running, the effect will come out. This JS does not write out the AJAX method for interacting with the background. You can decide according to the specific situation.