최근에 나는 목록 페이지를 포함한 프로젝트를 만들었습니다. 사용자 경험의 경우 모든 작업은 JS를 사용하여 구현됩니다. 여기에는 위로 이동, 다운, 삭제 등과 같은 기능이 포함됩니다. 프론트 엔드 JS 및 백엔드 데이터 수정은 Ajax를 사용합니다. 이 기사는 주로 프론트 엔드 JS 섹션에 대해 이야기합니다.
먼저 페이지의 스크린 샷을 살펴 보겠습니다.
HTML 구조를 살펴보십시오. 물론 이것은 프론트 엔드 그림 절단과 관련이 있습니다. 백엔드 프로그램 직원은 자신의 JS를 작성하는 책임이 있습니다. 나는 우리 프로젝트를 예로 들고 그들이 잘라낸 HTML을 살펴 보겠습니다.
<ul> <li> <div> <div> <span> </span> <span> content <em> 1 </em> : </span> <em> 2013 연장 된 작업 .txt </em> </div> <div> 2014/9/24 9:54:00 </div> <value = "253040"href = "</span> <</span> value = "253040"href = "javaScript :;"> <span> 아래로 이동 </span> </a> <a value = "253040"href = "javaScript :;"> <span> 아래로 이동 </span> </a> <a value = "253040" href = "javaScript :;"> <span> delete </span> </a> </div> </li> <li> <li> <div> <span> </span> <span> content <em> 2 </em> : </span> <em> 사용에 대한 지침 </em> </div> 2014/9/24 9:54:00 </div> <an value = "253041"href = "javaScript :;"> <span> 이동 위로 이동 </span> </a> <a value = "253041"href = "javaScript :;"> </a> <a value = "253041"href = "javascript :" "> <2530 41" "" "2530 41" "<a <<a> <2530 41". href = "javaScript :;"> <span> delete </span> </a> </div> </li> <li> <li> <div> <span> </span> <span> content <em> 3 </em> : </span> <em> Zhanzhan.txt </em> </div> <em> 2014/9/24 9:00 </div> <an value = "253040"href = "javaScript :;"> <span> 이동 위로 이동 </span> </a> <a value = "253040"href = "javaScript :;"> </a> <value = "253040"href = "javascript :" "> <2530 40 이동> </<2530 40" href = "javaScript :;"> <span> delete </span> </a> </a> </div> </li> <li> <div> <span> </span> <span> content <em> 4 </em> : </span> <em> 분류 문제. href = "javaScript :;"> <span> 이동 </span> </a> <value = "253041"253041 "href ="javaScript : "> <span> 아래로 이동 </span> </a> <a value ="253041 "href ="javaScript :; "> <span> 이동 </span> </a> <a value ="253041 " href = "javaScript :;"> <span> delete </span> </a> </a> </div> </div> </li> </ul>
JQ On Method를 사용하여 주로 구현되는 JS 코드를 살펴 보겠습니다. 그 이유는 목록의 데이터가 처음으로 정적이기 때문입니다. 정렬하면 데이터가 동적이됩니다 (라이브). 따라서이 구조는 만 사용할 수 있습니다. 코드를 살펴 보겠습니다.
<script type = "text/ecmascript"> $ (function () {// 위로 이동하여 $ ( ". clearfix"). on ( "click", ".moveUpbtn", function () {var self = $ (this); var _old = self.closest ( "li.courselist"); "li.courselist"); (_new.length> 0) {var _temp = _old.html (); _ old.empty (). 부록 (_new.html ()); $ (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 (). 부록 (_new.html ()); _ new.empty (). Append (_temp);}}); // delete $ ( ". clearfix"). on ( "click".deletebtn ", function () {hater source (this); // this); self.closest ( "li.courselist"). remain ();});}); </script>실행 후 효과가 해제됩니다. 이 JS는 배경과 상호 작용하기위한 Ajax 방법을 기록하지 않습니다. 특정 상황에 따라 결정할 수 있습니다.