1. ฉันพบหน้าการประเมินผลผลิตภัณฑ์ในโครงการซึ่งมีการประเมินดาวของผลิตภัณฑ์ ในเวลานั้นฉันเพิ่งเขียนเอฟเฟกต์ (นั่นคือผู้ใช้คลิกที่ดวงดาวสองสามดวงเพื่อแสดงให้เห็นถึงความสว่างสองสามอัน)
เมื่อฉันทำหน้าและส่งมอบให้กับเพื่อนร่วมงานแบ็กเอนด์ของฉันเขาบอกว่ามันไม่มีความหมายสำหรับฉันที่จะทำสิ่งนี้และเขาไม่สามารถทำได้ ในเวลานั้นใจของฉันสับสนเล็กน้อย
ต่อมาเพื่อนร่วมงานของฉันที่แบ็กเอนด์บอกว่าเขาจะสร้างปัญหา ในฐานะที่เป็นชายหนุ่มที่มีแดดในศตวรรษที่ 21 เขาจะปล่อยให้เพื่อนร่วมงานของเขาช่วยเขาทำงานให้สำเร็จได้อย่างไร?
ผ่านคำแนะนำของเพื่อนร่วมงานและการสำรวจของฉันเองในที่สุดฉันก็เข้าใจความสัมพันธ์ที่นี่ ตอนนี้ฉันจะอธิบายวิธีการเขียนโปรแกรมนี้และสิ่งที่ควรดำเนินการผ่านคำพูดของฉันเอง
A, ภาพอยู่ด้านบน:
B: ภาพด้านบนตรวจสอบหนึ่งใน 5 ไฟและอีก 4 ไฟ อะไรทำให้เป็นแบบนี้? ดูภาพด้านล่าง:
ใช่ใช่จำนวนดาวที่มีแสงสว่างในดาวเริ่มต้นเป็นเพราะข้อมูล
C: ตอนนี้เราสามารถพูดคุยเกี่ยวกับข้อมูลนี้ได้ แต่ข้อมูลนี้คืออะไร?
ปรากฎว่า front-end และ back-end เห็นด้วยกับตำแหน่งที่เก็บข้อมูล (คุณสามารถให้ชื่อใด ๆ tada หรือ tdat) แบ็คเอนด์สามารถกำหนดค่าให้กับมันและข้อมูลเท่ากับดาวจำนวนมากเท่าที่เป็น แต่ทำไมคุณถึงต้องการข้อมูลนี้?
มันคือ Jiang Zi: เมื่อผู้ใช้คลิกบนดาวสามารถดูได้กับผู้ใช้ B ผู้ใช้ B ผู้ใช้ C ผู้ใช้ D ... ดังนั้น จำนวนดาวที่ถูกคลิกโดยผู้ใช้จะต้องจัดเก็บ (กำหนด) ในสถานที่หนึ่ง (นั่นคือข้อมูล) เพื่อให้พื้นหลังสามารถรับได้
นั่นคือส่วนหน้ากำหนดค่าแบ็คเอนด์จะใช้ค่าและแบ็คเอนด์จะเก็บข้อมูลที่ได้รับในฐานข้อมูลแล้วส่งมอบให้กับข้อมูลเพื่อแสดงจำนวนดาวบวกที่ผู้ใช้ A ประเมิน
การกำหนด front-end ------》 ค่า back-end-》 ข้อมูลการจัดเก็บแบ็คเอนด์-》 คำติชมย้อนกลับไปยังส่วนหน้าตามข้อมูลที่เก็บไว้-》 ส่วนหน้าแสดงเอฟเฟกต์ที่สอดคล้องกันบนหน้าตามข้อเสนอแนะข้อมูลจากด้านหลัง-》》
ตกลงถ้าคุณเข้าใจตรรกะคุณสามารถเขียนโปรแกรม:
$ ('. evaluate_mark'). แต่ละ (ฟังก์ชั่น () {var star = $ (นี่) .find ('. u-grade'). attr ('data'); // รับข้อมูลหนึ่งคือ 5 และอีก 4/*การแจ้งเตือน (ดาว)*/$ (นี้) div '). แต่ละ (ฟังก์ชั่น (i, ele) {// องค์ประกอบปัจจุบันของ ele, ดัชนีของ I องค์ประกอบปัจจุบัน i ถ้า (i <star) { / *Alert (i); * / / *Alert (ele); * /$ (ele) .addclass (' Light ');}});});รหัสข้างต้นค่อนข้างง่าย ขั้นแรกให้วนซ้ำและค้นหา div ด้านล่างเกรด-เกรดนั่นคือ u-grada_item
หลังจากพบแล้วให้ถอดไฟทั้งหมดออก (แสงคือคลาสที่ส่องแสงดาวใน CSS) จากนั้นสำรวจ U-grada_item Star ได้รับมูลค่าข้อมูลและตัดสินตาม i <Star
สิ่งนี้แสดงให้เห็นถึงจำนวนความสว่างของดาวนั่นคือภาพแรกด้านบนสว่างหนึ่งภาพหนึ่งสว่างหนึ่งสว่างหนึ่งสว่างหนึ่งสว่างและอีกภาพหนึ่งสว่างและอีกอันสว่างและอีกอันสว่างและอีกอันสว่างและอีกอันสว่างและอีกอันสว่าง
4.1: ณ จุดนี้เราได้เสร็จสิ้นการมอบหมายส่วนหลังและเอฟเฟกต์ประสิทธิภาพส่วนหน้า ยังมีอีกสองชิ้นที่เหลืออยู่ในเวลานี้
หนึ่งคือส่วนที่ผู้ใช้คลิกเพื่อสร้างเอฟเฟกต์และอีกส่วนหนึ่งคือการกำหนดค่าของการคลิกของผู้ใช้บนดาวปัจจุบันบนข้อมูล (ให้แบ็กเอนด์บันทึกค่าและกำหนดค่าใหม่และแสดง)
4.2: มาทำสิ่งต่อไปนี้เพื่อแสดงผลของการคลิกผู้ใช้
$ (function () {$. setGrade = function ($ ele, index) {var $ item = $ ele.find (". u-grade_item"); $ item.removeclass ("Light"); $ item.slice (0, ดัชนี+1) .U-GRADE_ITEM "); $ item.Click (ฟังก์ชัน () {var $ this = $ (นี่); /*กำหนดตัวแปรเพื่อบันทึกวัตถุ $ รายการปัจจุบัน* /var index = $ this.parent (". u-grade ") เด็ก ๆ (" u-grade_item ") Element/ *การแจ้งเตือน (ดัชนี);ตอบ: ฉันจะไม่พูดถึงการใช้งานรหัสทีละคน คุณสามารถอ่านความคิดเห็น ด้วยวิธีนี้ผู้ใช้คลิกเพื่อสร้างเอฟเฟกต์ มีเพียงคนสุดท้ายด้านล่าง กำหนดค่าของดาวที่ถูกคลิกโดยผู้ใช้กับข้อมูล
เป็นเรื่องง่ายที่จะทำให้ชัดเจน:
(function () {var $ item = $ (". u-grade .u-grade_item"); $ item.click (ฟังก์ชั่น () {var $ this = $ (นี่); ดัชนี var = $ this.parent (". u-grade_item") ดัชนี ($ this); ค่าข้อมูล $ .setGrade ($ this.parent (), ดัชนี);โอเคเนื้อหาทั้งหมดของบทความนี้ได้รับการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!