حول اتصال البيانات والمطابقة مع الخلفية (تضيء النجوم)

1. واجهت صفحة تقييم المنتج في المشروع ، والتي تضمنت تقييم النجوم للمنتج. في ذلك الوقت ، كتبت للتو التأثير (أي ، نقر المستخدم على عدد قليل من النجوم لإظهار عدد قليل من النجوم المشرقة).

عندما صنعت الصفحة وسلمتها إلى زميلي الخلفي ، قال إنه لا معنى له بالنسبة لي أن أفعل ذلك ولم يستطع فعل ذلك. في ذلك الوقت ، كان عقلي مرتبكًا قليلاً.

في وقت لاحق ، قال زميلي في الخلفية إنه سيواجه المتاعب. عندما كان شابًا مشمسًا في القرن الحادي والعشرين ، كيف يمكن أن يسمح لزملائه بمساعدته على إكمال مهامه؟

من خلال نصيحة زملائي واستكشاف بلدي ، فهمت أخيرًا العلاقة هنا. الآن سأشرح كيفية كتابة هذا البرنامج وما هي العمليات التي يجب القيام بها من خلال كلماتي الخاصة.

أ ، الصورة أعلاه:

ب: استعرضت الصورة أعلاه واحدة من الأضواء الخمسة والأضواء الأربعة الأخرى. ما الذي يجعلها هكذا؟ انظر الصورة أدناه:

نعم ، نعم ، عدد النجوم المضاءة في نجم البداية بسبب البيانات

C: الآن يمكننا التحدث عن هذه البيانات ، ولكن ما هي هذه البيانات؟

اتضح أن الواجهة الأمامية والخلفية المتفق عليها على مكان تخزين البيانات (يمكنك إعطائها أي اسم TADA أو TDAT). يمكن للخلفية الخلفية تعيين قيم لها ، والبيانات تساوي العديد من النجوم كما هي. ولكن لماذا تحتاج هذه البيانات؟

إنه Jiang Zi: عندما ينقر المستخدم على النجم ، يمكن عرضه على المستخدم B user c user d ... ، لذلك يجب تخزين عدد النجوم التي نقرها المستخدم (تم تعيينها) في مكان معين (أي البيانات) بحيث يمكن أن تحصل عليها الخلفية.

بمعنى أن الواجهة الأمامية يعين القيم ، وتأخذ الواجهة الخلفية القيم ، ويخزن الواجهة الخلفية البيانات التي تم الحصول عليها في قاعدة البيانات ثم يعيد تعيينها على البيانات لعرض عدد النجوم الإيجابية التي قام بها المستخدم A بتقييمها.

مهمة الواجهة الأمامية ------》 القيمة الخلفية-بيانات التخزين الخلفية-》 ردود الفعل الخلفية إلى الواجهة الأمامية بناءً على البيانات المخزنة-》 تعرض الواجهة الأمامية التأثيرات المقابلة على الصفحة بناءً على ملاحظات البيانات من الخلف-》

حسنًا ، إذا فهمت المنطق ، يمكنك كتابة البرنامج:

 $ ('. evalate_mark'). كل (function () {var star = $ (this) .find ('. div '). كل (دالة (i ، ele) {// ele's element ، فهرس العنصر الحالي i if (i <star) { / *alert (i) ؛ * / / *alert (eLe) ؛ * /$ (ele) .addClass (' light ') ؛}}) ؛}) ؛

الكود أعلاه بسيط نسبيا. أولاً ، قم بالتكرار وابحث عن div أدناه.

بعد العثور عليها ، قم بإزالة جميع أضواءها (الضوء هو الفئة التي تضيء النجوم في CSS) ، ثم تعبر U-Grada_Item. حصل Star على قيمة البيانات وحكم عليه بناءً على i <star.

يوضح هذا عدد سطوع النجوم ، أي ، الصورة الأولى أعلاه مشرقة ، واحدة مشرقة ، واحدة مشرقة ، واحدة مشرقة ، والآخر مشرق ، والآخر مشرق ، والآخر مشرق ، والآخر مشرق ، والآخر مشرق ، والآخر مشرق ، والآخر مشرق ، والرقم مشرق ، والرقم مشرق ، والرقم مشرق.

4.1: في هذه المرحلة ، أكملنا المهمة الخلفية وتأثير الأداء الأمامي. لا تزال هناك قطعتين متبقيتين في هذا الوقت.

أحدهما هو الجزء الذي ينقر فيه المستخدم لإنتاج التأثير ، والآخر هو تعيين قيمة المستخدم على النقر على النجم الحالي على البيانات (دع الواجهة الخلفية حفظ القيمة وإعادة تعيين القيمة وعرضها)

4.2: دعنا نفعل ما يلي لإظهار تأثير نقرات المستخدم

 $ (function () {$. setgrade = function ($ ele ، index) {var $ item = $ ele.find (". .u-rgene_item ") ؛ $ item.click (function () {var $ this = $ (this) ؛ /*حدد متغيرًا لحفظ كائن عنصر $ الحالي* /var index = $ this.parent (". element/ *alert (index) ؛

ج: لن أتحدث عن تنفيذ الكود واحدًا تلو الآخر. يمكنك قراءة التعليقات. وبهذه الطريقة ، ينقر المستخدم على إنتاج التأثير. لا يوجد سوى آخر واحد أدناه. قم بتعيين قيمة النجم الذي نقره المستخدم إلى البيانات.

من السهل توضيح ذلك:

 (function () {var $ item = $ (". قيمة البيانات $ .SetGrade ($ this.parent () ، index) ؛

حسنًا ، تم تقديم المحتوى الكامل لهذه المقالة. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!