Vor kurzem habe ich ein Projekt mit einer Listenseite gemacht. Für die Benutzererfahrung werden alle Vorgänge mit JS implementiert, einschließlich Funktionen wie nach oben, nach unten, das Löschen usw. in der Liste. Front-End-JS und Back-End-Datenänderungen verwenden AJAX. In diesem Artikel geht es hauptsächlich um den Front-End-JS-Bereich.
Schauen wir uns zuerst den Screenshot der Seite an
Schauen Sie sich die HTML -Struktur an. Dies hängt natürlich mit dem Front-End-Bildschnitt zusammen. Das Back-End-Programmpersonal ist nur für das Schreiben ihres eigenen JS verantwortlich. Ich werde unser Projekt als Beispiel annehmen und einen Blick auf die HTML werfen, die sie schneiden.
<ul> <li> <div> <div> <Pan> </span> <Pan> Inhalt <em> 1 </em>: </span> <em> 2013 Überstundenarbeit value = "253040" href = "JavaScript:;"> <span> Beziehen Sie sich nach unten </span> </a> <a value = "253040" href = "javaScript:;"> <span> Nach unten </span> </a> <a value = "253040" href = "javaScript:;"> <span> Löschen </span> </a> </div> </li> <li> <div> <div> <span> </span> Inhalt <em> 2 </em>: </span> <em> Anweisungen für die Verwendung. href = "javaScript:;"> <span> Nach oben </span> </a> <a value = "253041" href = "javaScript:;"> <span> Nach unten </span> </a> <a value = "253041" href = "JavaScript:; href = "javaScript:;"> <span> lösche </span> </a> </div> </li> <li> <div> <div> <span> </span> Inhalt <em> 3 </em>: </span> <em> Meister von Zhanzhan. value = "253040" href = "JavaScript:;"> <span> Nach oben </span> </a> <a value = "253040" href = "JavaScript:;"> <span> Beachten href = "javaScript:;"> <span> lösche </span> </a> </div> </li> <li> <div> <div> <span> </span> Inhalt <em> 4 </em>: </span> <em> Sortierungsproblem.txt </em> </div> 2014/9/24 9:54:00:00 href = "javaScript:;"> <span> Nach oben </span> </a> <a value = "253041" href = "javaScript:;"> <span> Nach unten </span> </a> <a value = "253041" href = "JavaScript:; href = "javaScript:;"> <span> Löschen </span> </a> </div> </div> </li> </ul>
Schauen wir uns den JS -Code an, der hauptsächlich mit der Methode JQ implementiert wird. Der Grund dafür ist, dass die Daten in der Liste zum ersten Mal statisch sind. Bei der Sortierung werden die Daten dynamisch (live). Daher kann diese Struktur nur verwendet werden. Schauen wir uns den Code an.
<script type = "text/ecmascript"> $ (function () {// up $ (". clearFix"). on ("klick", ". (_new.length> 0) {var _temp = _old.html (); _ old.empty (). append (_New.html ()); _ new.empty (). append (_temp);}); // $ (". self = $ (this); var _old = self.closest ("li.courselist"); var _new = self.closest ("li.Courselist"). Weiter ("li"); if (_new.Length> 0) {var _temp = _old.html (); _ old.empty (). append (_new.html ()); _ new.empty (). append (_temp);}}); // $ (". clearfix"). on ("click", ".Deletntn -Objekt (). self.closest ("li.courselist"). remove ();});}); </script>Nach dem Laufen wird der Effekt freigegeben. Dieser JS schreibt die AJAX -Methode nicht zur Interaktion mit dem Hintergrund auf. Sie können nach der spezifischen Situation entscheiden.