Недавно я сделал проект, включая страницу списка. Для пользовательского опыта все операции реализованы с использованием JS, который включает в себя такие функции, как движение, движение вниз, удаление и т. Д. В списке. Front-End JS и модификация данных Back-End Используйте AJAX. В этой статье в основном рассказывается о разделе JS Front-End.
Давайте сначала посмотрим на скриншот страницы
Взгляните на его HTML -структуру. Конечно, это связано с перерезанием фронтального изображения. Сотрудники программы Backend отвечают только за написание собственного JS. Я возьму наш проект в качестве примера и посмотрю на HTML, который они вырезали.
<ul> <li> <div> <div> <pan> </span> <pan> content <em> 1 </em>: </span> <em> 2013 Overtime Work.txt </em> </div> <div> 2014/9/24 9:54:00 </div> <div> <a value = "253040" href = "Javascript:; value = "253040" href = "javaScript :;"> <pan> перемещать вниз </span> </a> <a value = "253040" href = "javascript :;"> <pan> Движение вниз </span> </a> <a value = "253040" href = "javascript :;"> <pan> delete </span> </a> </div> </li> <li> <div> <div> <pan> </span> <pan> <em> 2 </em>: </span> <em> href = "javascript :;"> <pan> перемещать вверх </span> </a> <a value = "253041" href = "javascript :;"> <pan> Движение </span> </a> <a value = "253041" href = "javascript :;"> <pran> move down </span> </a> <value = "25301". href = "javascript :;"> <pan> delete </span> </a> </div> </li> <li> <div> <div> <pan> </span> <pan> content <em> 3 </em>: </span> <em> Мастер Zhanzhan.txt </em> </div> <div> 2014/9/24 9:54:00 </em> </div> <div> 2014/9/24 9:54:00 value = "253040" href = "javascript :;"> <pan> перемещать вверх </span> </a> <a value = "253040" href = "javascript :;"> <pan> Движение вниз </span> </a> <a value = "253040" href = "javascript :; </span> </span> </avel> </agla> <а значение> <а значение. href = "javascript:;"> <pan> delete </span> </a> </div> </li> <li> <div> <div> <pan> </span> <pan> <em> 4 </em>: </span> <em> sorting chold. href = "javascript :;"> <pan> перемещать вверх </span> </a> <a value = "253041" href = "javascript :;"> <pan> Движение </span> </a> <a value = "253041" href = "javascript :;"> <pran> move down </span> </a> <value = "25301". href = "javascript :;"> <pan> delete </span> </a> </div> </div> </li> </ul>
Давайте посмотрим на код JS, который в основном реализуется с использованием метода JQ на. Причина в том, что данные в списке являются статичными в первый раз. При сортировке данные становятся динамическими (вживую). Следовательно, эта структура может быть использована только на. Давайте посмотрим на код.
<script type = "text/ecmascript"> $ (function () {// перемещать $ (". clearfix"). On ("click", ".moveupbtn", function () {var self = $ (this); var _old = self. (_new.length> 0) {var _temp = _old.html (); _ old.empty (). Append (_new.html ()); _ new.empty (). Append (_temp);}}); // перемещение вниз $ (". $ (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"). On ("click", ".deleteBtn", function () {var self = (это); self.closest ("li.courselist"). remove ();});}); </script>После запуска эффект выпускается. Этот JS не записывает метод AJAX для взаимодействия с фон. Вы можете решить в соответствии с конкретной ситуацией.