Recentemente, fiz um projeto, incluindo uma página de lista. Para a experiência do usuário, todas as operações são implementadas usando o JS, que inclui funções como subir, descer, excluir etc. na lista. JS front-end e modificação de dados de back-end use Ajax. Este artigo fala principalmente sobre a seção JS front-end.
Vamos dar uma olhada na captura de tela da página primeiro
Dê uma olhada em sua estrutura HTML. Obviamente, isso está relacionado ao corte de imagem front-end. A equipe do programa de back-end é responsável apenas por escrever seu próprio JS. Vou considerar nosso projeto como exemplo e dar uma olhada no HTML que eles cortam.
<ul> <li> <div> <div> <mpan> </span> <pan> Content <em> 1 </em>: </span> <em> 2013 trabalhos na hora das horas extras </em> </div> <div> 2014/9/24 9:54:00 </div> <bue = "253040" href = " value = "253040" href = "javascript :;"> <pan> mova -se para baixo href = "javascript :;"> <pan> delete </span> </a> </div> </li> <li> <div> <div> <pan> </span> </span> content <em> 2 </em>: </span> <em> Instruções para uso.txt </em> </div> <div> 2014. href = "javascript :;"> <pan> mova -se </span> </a> <a value = "253041" href = "javascript :;"> <pan> mova -se </span> </a> <a value = "253041" href = "javascript:;"> <pla> move </span> </span> </span> </spana> </span> </span> </span> </spana "</span> </span> </span> </span> </spana", href = "javascript :;"> <pan> delete </span> </a> </div> </li> <li> <div> <div> <mpan> </span> </span> content <em> 3 </em>: </span> <em> mestre de zhanzhan.txt </em> value = "253040" href = "javascript :;"> <pan> mova -se </span> </a> <a value = "253040" href = "javascript :;"> <pan> mover para baixo </span> </a> <a value = "253040" href = "javScript:; href="javascript:;"><span>Delete</span></a></div></li><li><div><div><span></span><span>Content<em>4</em>:</span><em>Sorting Problem.txt</em></div><div>2014/9/24 9:54:00</div><div><a value="253041" href = "javascript :;"> <pan> mova -se </span> </a> <a value = "253041" href = "javascript :;"> <pan> mova -se </span> </a> <a value = "253041" href = "javascript:;"> <pla> move </span> </span> </span> </spana> </span> </span> </span> </spana "</span> </span> </span> </span> </spana", href = "javascript :;"> <pan> delete </span> </a> </div> </div> </li> </ul>
Vamos dar uma olhada no código JS, que é implementado principalmente usando o método JQ on. O motivo é que os dados da lista são estáticos pela primeira vez. Quando classificado, os dados se tornam dinâmicos (ao vivo). Portanto, essa estrutura só pode ser usada. Vamos dar uma olhada no código.
<script type = "text/ecmascript"> $ (function () {// mova -se $ (". clearfix"). on ("clique", ".moveupbtn", function () {var self = $ (this); var _old = self.closest ("li.courselist"); var _new = "closest ("" "" (_new.length> 0) {var _temp = _old.html (); _ Old.Empty (). Append (_new.html ()); _ new.empty (). $ (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);}}); // excluir $ (". Clearfix"). Self.closest ("li.courselist"). Remover ();});}); </script>Após a corrida, o efeito é liberado. Este JS não escreve o método Ajax para interagir com o plano de fundo. Você pode decidir de acordo com a situação específica.