最近做了一個項目，包括了一個列表頁，為了用戶體驗，操作均使用JS實現，其中包括在列表中實現上移，下移，刪除等功能，前臺JS，后端數據修改使用AJAX，本文主要說一下前臺JS這塊

先看一下頁面的截圖

看一下它的HTML結構，當然，這與前臺切圖有關，后端程序人員只負責寫自己的JS這塊，我以我們項目為例，看一下它們切的HTML

<ul><li><div><div><span></span><span>內容<em>1</em>：</span><em href="javascript:;"><span>上移</span></a><a value="253040" href="javascript:;"><span>下移</span></a><a value="253040" href="javascript:;"><span>刪除</span></a></div></div></li><li><div><div><span></span><span>內容<em>2</em>：</span><em href="javascript:;"><span>上移</span></a><a value="253041" href="javascript:;"><span>下移</span></a><a value="253041" href="javascript:;"><span>刪除</span></a></div></div></li><li><div><div><span></span><span>內容<em>3</em>：</span><em href="javascript:;"><span>上移</span></a><a value="253040" href="javascript:;"><span>下移</span></a><a value="253040" href="javascript:;"><span>刪除</span></a></div></div></li><li><div><div><span></span><span>內容<em>4</em>：</span><em href="javascript:;"><span>上移</span></a><a value="253041" href="javascript:;"><span>下移</span></a><a value="253041" href="javascript:;"><span>刪除</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方法寫出來，大家可以根據具體情況而定。