เมื่อเร็ว ๆ นี้ฉันทำโครงการรวมถึงหน้ารายการ สำหรับประสบการณ์ของผู้ใช้การดำเนินการทั้งหมดจะถูกนำไปใช้โดยใช้ JS ซึ่งรวมถึงฟังก์ชั่นเช่นการเลื่อนขึ้นการย้ายลงการลบ ฯลฯ ในรายการ JS front-end และการปรับเปลี่ยนข้อมูล back-end ใช้ AJAX บทความนี้ส่วนใหญ่พูดถึงส่วน JS front-end
มาดูภาพหน้าจอของหน้ากันก่อน
ดูโครงสร้าง HTML แน่นอนว่าสิ่งนี้เกี่ยวข้องกับการตัดภาพส่วนหน้า เจ้าหน้าที่โปรแกรมแบ็คเอนด์รับผิดชอบการเขียน JS ของตัวเองเท่านั้น ฉันจะนำโครงการของเราเป็นตัวอย่างและดู HTML ที่พวกเขาตัด
<ul> <li> <div> <div> <span> </span> <span> เนื้อหา <em> 1 </em>: </span> <em> 2013 ทำงานล่วงเวลา. txt </em> </div> <div> 2014/9/24 9:54:00 </div> value = "253040" href = "JavaScript:;"> <span> ย้ายลง </span> </a> <a value = "253040" href = "JavaScript:;"> <span> เลื่อนลง </span> </a> <a value = "253040" href = "javascript:;"> <span> ลบ </span> </a> </div> </li> <li> <li> <div> <div> <span> </span> <span> เนื้อหา <em> 2 </em>: </span> <em> href = "javascript:;"> <span> เลื่อนขึ้น </span> </a> <a value = "253041" href = "JavaScript:;"> <span> เลื่อนลง </span> </a> <a value = "253041" href = "JavaScript:;" href = "javascript:;"> <span> ลบ </span> </a> </viv> </li> <li> <li> <div> <div> <span> </span> <span> เนื้อหา <em> 3 </em>: </span> <em> Master of Zhanzhan.txt </em> </em> value = "253040" href = "JavaScript:;"> <span> เลื่อนขึ้น </span> </a> <a value = "253040" href = "JavaScript :;"> <span> เลื่อนลง </span> </a> <a value = "253040" href = "javascript:; href = "javascript:;"> <span> ลบ </span> </a> </v> </li> <li> <li> <div> <div> <span> </span> <span> เนื้อหา <em> 4 </em>: </span> <em> การเรียงลำดับปัญหา href = "javascript:;"> <span> เลื่อนขึ้น </span> </a> <a value = "253041" href = "JavaScript:;"> <span> เลื่อนลง </span> </a> <a value = "253041" href = "JavaScript:;" href = "JavaScript:;"> <span> ลบ </span> </a> </div> </div> </li> </ul>
ลองดูที่รหัส JS ซึ่งส่วนใหญ่ใช้โดยใช้ JQ on Method เหตุผลก็คือข้อมูลในรายการนั้นคงที่เป็นครั้งแรก เมื่อจัดเรียงข้อมูลจะกลายเป็นแบบไดนามิก (สด) ดังนั้นโครงสร้างนี้สามารถใช้ได้เท่านั้น มาดูรหัสกันเถอะ
<script type = "text/ecmascript"> $ (function () {// เลื่อนขึ้น $ (". clearfix") บน ("คลิก", ".moveupbtn", ฟังก์ชั่น () {var self = $ (นี่); var _old = self.closest ("li.courselist"); var _new = self (_new.length> 0) {var _temp = _old.html (); _ old.empty (). ผนวก (_new.html ()); _ new.empty (). append (_temp);}}); $ (this); var _old = self.closest ("li.courselist"); var _new = self.closest ("li.courselist") ถัดไป ("li"); ถ้า (_new.length> 0) {var _temp = _old.html (); _ old.empty (). ผนวก (_new.html ()); _ new.empty (). ผนวก (_temp);}}); // ลบ $ (". clearfix") self.closest ("li.courselist"). ลบ ();});}); </script>หลังจากทำงานแล้วเอฟเฟกต์จะถูกปล่อยออกมา JS นี้ไม่ได้เขียนวิธี AJAX สำหรับการโต้ตอบกับพื้นหลัง คุณสามารถตัดสินใจได้ตามสถานการณ์เฉพาะ