Baru -baru ini, saya membuat proyek, termasuk halaman daftar. Untuk pengalaman pengguna, semua operasi diimplementasikan menggunakan JS, yang mencakup fungsi seperti bergerak ke atas, bergerak ke bawah, menghapus, dll. Dalam daftar. JS front-end, dan modifikasi data back-end menggunakan AJAX. Artikel ini terutama berbicara tentang bagian JS front-end.
Mari kita lihat tangkapan layar halaman terlebih dahulu
Lihatlah struktur HTML -nya. Tentu saja, ini terkait dengan pemotongan gambar front-end. Staf program back-end hanya bertanggung jawab untuk menulis JS mereka sendiri. Saya akan menganggap proyek kami sebagai contoh dan melihat HTML yang mereka potong.
<ul> <li> <div> <div> <span> </span> <span> Konten <em> 1 </em>: </span> <em> 2013 working work.txt </em> </div> <div> 2014/9/24 9:54:00 </div> <v Nilai = "253040" HREF = "JAVAS; value = "253040" href = "javascript:;"> <span> pindah </span> </a> <a value = "253040" href = "javascript :;"> <span> pindah </span> </a> <value = "253040" href = "JavaScript:;"> <span> hapus </span> </a> </div> </li> <li> <vv> <van> <span> </span> <span> konten <em> 2 </em>: </span> <em> instruksi untuk penggunaan.txt </em> </Div> </em> </span> <em> href = "JavaScript:;"> <span> Pindah </span> </a> <a value = "253041" href = "javascript:;"> <span> ke bawah </span> </a> <a value = "253041" href = "JavaScript:;"> <a span> </span> </span> </a "<" Nilai = "2530" 2530 "APOVE =" 2530 "> </a" </a. " href = "JavaScript:;"> <span> hapus </span> </a> </div> </li> <li> <verv> <div> <span> </span> <span> Konten <em> 3 </em>: </span> <emer> Master Zhanzhan.tx </em> </Div> </span> <em> <em> </a. value = "253040" href = "javaScript:;"> <span> Pindah </span> </a> <a value = "253040" href = "javascript :;"> <span> Pindah </span> </a> <a value = "253040" href = "javascript:;"> <"a -span> <a span> </253040" href = "javascript:;"> <"a span> span> pondok </rentang </rentang </a/href =" javascript:; "> <" a span = a span = "253040" href = "javascript:;"> <"span = span = span> </span> </a/href =" javascript:; "> <" span> span> span> href = "JavaScript:;"> <span> hapus </span> </a> </div> </li> <li> <div> <van> <span> </span> <span> Konten <em> 4 </em>: </span> <em> "Nilai" </Div> </Div> </Div> <v> 2014/9/9/24. " href = "JavaScript:;"> <span> Pindah </span> </a> <a value = "253041" href = "javascript:;"> <span> ke bawah </span> </a> <a value = "253041" href = "JavaScript:;"> <a span> </span> </span> </a "<" Nilai = "2530" 2530 "APOVE =" 2530 "> </a" </a. " href = "javascript:;"> <span> hapus </span> </a> </div> </div> </li> </ul>
Mari kita lihat kode JS, yang terutama diimplementasikan menggunakan metode JQ ON. Alasannya adalah bahwa data dalam daftar statis untuk pertama kalinya. Saat diurutkan, data menjadi dinamis (langsung). Oleh karena itu, struktur ini hanya dapat digunakan. Mari kita lihat kode.
<script type = "text/ecmascript"> $ (function () {// pindahkan $ (". clearfix"). on ("click", ".moveupbtn", function () {var self = $ (this); var _old = self.closest ("li.courselist"); var _new =.closest ("li." (_new.length> 0) {var _temp = _old.html (); _ Old.empty (). append (_new.html ()); _ new.empty (). Fungsi (_temp);}}); // pindahkan ke bawah (". $ (ini); var _old = self.closest ("li.courselist"); var _new = self.closest ("li.courselist"). selanjutnya ("li"); if (_new.length> 0) {var _temp = _old.html (); _ old.empty (). append (_new.html ()); _ new.empty (). append (_temp);}}); // hapus $ (". self.closest ("li.courselist"). Remove ();});}); </script>Setelah berjalan, efeknya dirilis. JS ini tidak menuliskan metode AJAX untuk berinteraksi dengan latar belakang. Anda dapat memutuskan sesuai dengan situasi tertentu.