JS implementiert Funktionen wie das Verschieben nach oben, das Verschieben nach unten und das Löschen in einer Liste_Javascript-Fähigkeiten-js-Tutorial-php.cn

JS implementiert Funktionen wie das Verschieben nach oben, das Verschieben nach unten und das Löschen in einer Liste_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:35:34

Original

1453 Leute haben es durchsucht

Ich habe kürzlich an einem Projekt gearbeitet, das eine Listenseite enthält. Aus Gründen der Benutzererfahrung werden alle Vorgänge mithilfe von JS implementiert, einschließlich des Verschiebens nach oben, nach unten, des Löschens und anderer Funktionen , und die Back-End-Daten werden mit AJAX geändert. In diesem Artikel geht es hauptsächlich um das Front-End-JS

Schauen Sie sich zuerst den Screenshot der Seite an

Sehen Sie sich die HTML-Struktur an. Dies hängt natürlich mit dem Front-End-Programmieren zusammen. Lassen Sie mich unser Projekt als Beispiel betrachten sie schneiden

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

Nach dem Login kopieren

Im Folgenden betrachten wir hauptsächlich den JS-Code, der hauptsächlich mit der on-Methode von JQ implementiert wird. Der Grund dafür ist, dass die Daten in der Liste zum ersten Mal statisch (bind) sind. live). Daher ist es am sinnvollsten, für diese Struktur einen Blick auf den Code zu werfen

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

Nach dem Login kopieren

Nach dem Ausführen wird der Effekt angezeigt. Dieser JS schreibt nicht die AJAX-Methode für die Interaktion mit dem Hintergrund aus. Sie können entsprechend der spezifischen Situation entscheiden.