最近做了一個項目,包括了一個列表頁,為了用戶體驗,操作均使用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方法寫出來,大家可以根據具體情況而定。