1. Saya menemukan halaman evaluasi produk dalam proyek, yang berisi evaluasi bintang produk. Pada saat itu, saya baru saja menuliskan efeknya (yaitu, pengguna mengklik beberapa bintang untuk menunjukkan beberapa yang cerah).
Ketika saya membuat halaman dan menyerahkannya kepada kolega backend saya, dia mengatakan tidak ada artinya bagi saya untuk melakukan ini dan dia tidak bisa melakukannya. Pada saat itu, pikiran saya sedikit bingung.
Kemudian, kolega saya di backend mengatakan bahwa dia akan membuat masalah. Sebagai seorang pemuda yang cerah di abad ke -21, bagaimana dia bisa membiarkan rekan -rekannya membantunya menyelesaikan tugasnya?
Melalui saran kolega saya dan eksplorasi saya sendiri, saya akhirnya memahami hubungan di sini. Sekarang saya akan menjelaskan cara menulis program ini dan operasi apa yang harus dilakukan melalui kata -kata saya sendiri.
A, gambar di atas:
B: Gambar di atas mengulas salah satu dari 5 lampu dan 4 lampu lainnya. Apa yang membuatnya seperti ini? Lihat gambar di bawah ini:
Ya, ya, jumlah bintang terang di bintang awal adalah karena data
C: Sekarang kita dapat membicarakan data ini, tetapi data apa ini?
Ternyata front-end dan back-end setuju di mana data disimpan (Anda dapat memberikannya nama apa pun TADA atau TDAT). Back-end dapat menetapkan nilai untuk itu, dan data sama dengan sebanyak mungkin bintang. Tapi mengapa Anda membutuhkan data ini?
Ini Jiang Zi: Ketika pengguna klik pada bintang, itu dapat dilihat kepada pengguna B pengguna c pengguna d ..., sehingga jumlah bintang yang diklik oleh pengguna harus disimpan (ditugaskan) di tempat tertentu (yaitu, data) sehingga latar belakang dapat mendapatkannya.
Artinya, front-end memberikan nilai, back-end mengambil nilai, dan back-end menyimpan data yang diperoleh dalam database dan kemudian menugaskannya kembali ke data untuk menampilkan jumlah bintang positif yang telah dievaluasi pengguna A.
Penugasan front-end ------》 Nilai back-end-》 Data penyimpanan back-end-》 Umpan balik back-end ke front-end berdasarkan data yang disimpan-》 Tampilkan efek-end yang sesuai pada halaman berdasarkan umpan balik data dari belakang-》
Oke, jika Anda memahami logikanya, Anda dapat menulis programnya:
$ ('. Evalute_mark'). masing-masing (fungsi () {var star = $ (this) .find ('. U-grade'). attr ('data'); // Dapatkan data satu adalah 5 dan yang lainnya adalah 4/*alert (star)*/$ (this) .find ('. Div '). masing -masing (fungsi (i, ele) {// elemen saat ini, indeks elemen saya saat ini if (i <star) { / *alert (i); * / / *alert (ele); * /$ (ele) .addclass (' light ');}});});Kode di atas relatif sederhana. Pertama, peroleh dan temukan div di bawah.u-grade, yaitu, u-grada_item,
Setelah menemukannya, lepaskan semua lampu (cahaya adalah kelas yang menyalakan bintang di CSS), dan kemudian melintasi U-grada_item. Star telah memperoleh nilai data dan dinilai berdasarkan saya <Star.
Ini menunjukkan jumlah kecerahan bintang, yaitu, gambar pertama di atas cerah, yang satu cerah, satu cerah, satu cerah, satu cerah, dan satu cerah, dan yang lainnya cerah, dan yang lainnya cerah, dan yang lainnya cerah, dan yang lainnya cerah, dan yang lain cerah, dan jumlahnya cerah, dan jumlahnya cerah, dan jumlahnya cerah.
4.1: Pada titik ini, kami telah menyelesaikan tugas back-end dan efek kinerja front-end. Masih ada dua bagian yang tersisa saat ini.
Salah satunya adalah bagian di mana pengguna mengklik untuk menghasilkan efek, dan yang lainnya adalah menetapkan nilai klik pengguna pada bintang saat ini pada data (biarkan backend menyimpan nilai dan menugaskan kembali nilai dan menampilkannya)
4.2: Mari kita lakukan hal berikut untuk menunjukkan efek klik pengguna
$ (function () {$. setGrade = function ($ ele, index) {var $ item = $ ele.find (". .u-grade_item "); $ item.click (function () {var $ this = $ (this);/*Tentukan variabel untuk menyimpan objek $ item saat ini*/var index = $ this.parent (". */ $ .setGrade ($ this.parent (), index);A: Saya tidak akan berbicara tentang implementasi kode satu per satu. Anda dapat membaca komentarnya. Dengan cara ini, pengguna mengklik untuk menghasilkan efek. Hanya ada yang terakhir di bawah ini. Tetapkan nilai bintang yang diklik oleh pengguna ke data.
Mudah untuk memperjelas:
(function () {var $ item = $ (". U-grade .u-grade_item"); $ item.click (function () {var $ this = $ (this); var index = $ this.parent (". u-grade_item"). ATRICE ($ this); var star = $ (this) .parent (". nilai data $ .setGrade ($ this.parent (), index);Oke, seluruh konten artikel ini telah diperkenalkan. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!