Récemment, j'ai réalisé un projet, y compris une page de liste. Pour l'expérience utilisateur, toutes les opérations sont implémentées à l'aide de JS, qui inclut des fonctions telles que le montage, la descente, la suppression, etc. dans la liste. JS frontal et modification des données back-end utilisent AJAX. Cet article parle principalement de la section JS frontale.
Jetons un coup d'œil à la capture d'écran de la page d'abord
Jetez un œil à sa structure HTML. Bien sûr, cela est lié à la coupe d'image frontale. Le personnel du programme back-end n'est responsable que de la rédaction de son propre JS. Je vais prendre notre projet à titre d'exemple et jeter un œil au HTML qu'ils ont coupé.
<ul> <li> <div> <div> <span> </span> <span> Contenu <em> 1 </em>: </span> <em> 2013 Overrime Work.txt </em> </div> <v> 2014/9/24 9:54:00 </div> <v> <a value = "253040" href = "javascript:;"> <a varie <spanne> </pander> </pande> <spanner> </a> <s> <s> <a javascript :; "> <spanne> Value = "253040" href = "JavaScript :;"> <span> Déplacez-vous </span> </a> <a valeur = "253040" href = "javascrip href = "javascript :;"> <span> supprimer </span> </a> </div> </li> <li> <div> <div> <span> </span> <span> contenu <em> 2 </em>: </spande <em> Instructions pour usage.txt </em> </v> <av> "253041" href = "javascript :;"> <span> se déplacer </span> </a> <a value = "253041" href = "javascript :;"> <span> se déplacer </span> </a> <a value = "253041" href = "javascript :;"> <spanef down </span> </a> <a value = "253041" href = "JavaScript :;"> <span> delete </span> </a> </div> </li> <li> <div> <div> <span> </span> <span> contenu <em> 3 </em>: </span> <em> maître de zhanzhan.tx Value = "253040" href = "JavaScript :;"> <span> Déplacez-vous </span> </a> <a valeur = "253040" href = "javascrip href = "javascript :;"> <span> supprimer </span> </a> </div> </li> <li> <div> <div> <span> </span> <span> contenu <em> 4 </em>: </span> <em> Problème de tri.txt </em> </v> <av> "253041" href = "javascript :;"> <span> se déplacer </span> </a> <a value = "253041" href = "javascript :;"> <span> se déplacer </span> </a> <a value = "253041" href = "javascript :;"> <spanef down </span> </a> <a value = "253041" href = "javascript :;"> <span> supprimer </span> </a> </div> </div> </li> </ul>
Jetons un coup d'œil au code JS, qui est principalement implémenté à l'aide de la méthode JQ sur. La raison en est que les données de la liste sont statiques pour la première fois. Lorsqu'ils sont triés, les données deviennent dynamiques (en direct). Par conséquent, cette structure ne peut être utilisée que. Jetons un coup d'œil au code.
<script type = "text / ecmascript"> $ (function () {// Mov up up $ (". clearfix"). on ("click", ".moveupbtn", function () {var self = $ (this); var _old = self.closest ("li.courseList"); var _new = self.closest ("li.courseList"). (_new.length> 0) {var _temp = _old.html (); _ old.empty (). APPEND (_new.html ()); _ new.empty (). APPEND (_Temp);}}); // déplacer $ (". ClearFix"). sur ("click", ". 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);}}); // delete $ (". ClearFix"). Sur ("clique self.closest ("li.courSeList"). retire ();});}); </script>Après l'exécution, l'effet est libéré. Ce JS n'écrit pas la méthode AJAX pour interagir avec l'arrière-plan. Vous pouvez décider en fonction de la situation spécifique.