1. Я встретил страницу оценки продукта в проекте, которая содержала звездную оценку продукта. В то время я только что записал эффект (то есть пользователь нажал на несколько звезд, чтобы показать несколько ярких).
Когда я сделал страницу и передал ее своему коллеге по бэкэнд, он сказал, что для меня это было бессмысленно, и он не мог этого сделать. В то время мой разум был немного смущен.
Позже мой коллега на бэкэнд сказал, что он доставит проблемы. Будучи солнечным молодым человеком в 21 -м веке, как он мог позволить своим коллегам помочь ему выполнить свои задачи?
Благодаря совету моих коллег и собственным исследованиям я наконец понял отношения здесь. Теперь я объясню, как написать эту программу и какие операции должны быть выполнены своими словами.
а, картина выше:
B: На картинке выше рассмотрен один из 5 огней, а другой 4 света. Что делает это таким? Смотрите изображение ниже:
Да, да, количество освещенных звезд в стартовой звезде связано с данными
C: Теперь мы можем поговорить об этих данных, но что это за данные?
Оказывается, что фронтальные и бэк-энд согласились с тем, где хранятся данные (вы можете дать ему любое имя TADA или TDAT). Бэк-энд может присвоить ему значения, и данные равны столько же звезд, сколько и. Но зачем вам эти данные?
Это Jiang Zi: Когда пользователь A нажимает на звезду, его можно просмотреть для пользователя пользователя B пользователь C пользователь D ..., поэтому количество звезд, нажавших пользователь, должно храниться (назначен) в определенном месте (то есть данных), чтобы фон мог его получить.
То есть, что переднее время присваивает значения, бэк-энд принимает значения, а в задней части хранится полученные данные в базе данных, а затем переназначает их на данные, чтобы отобразить количество положительных звезд, которые пользователь A оценил.
Назначение переднего показателя ------》 Значение заднего дня-》 Данные по сравнению с концом хранилища-》 Обратная связь с внутренней частью на основе хранимых данных-》 Фронт-энд отображает соответствующие эффекты на странице на основе обратной связи с обратной стороной-》》》》》
Хорошо, если вы понимаете логику, вы можете написать программу:
$ ('. evaluate_mark'). Каждый (function () {var star = $ (this) .find ('. u-grade'). attr ('data'); // Получить данные один-5, а другой-4/*alert (star)*/$ (this) .find ('. u-grade divide'). div '). Каждый (function (i, ele) {// текущий элемент Ele, индекс I -текущего элемента if (i <star) { / *alert (i); * / / *alert (ele); * /$ (ele) .addclass (' light ');}});});Приведенный выше код относительно прост. Во-первых, итерация и найдите div ниже. U-Grade, то есть 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, index+1) .adclass ("light"); /*alert (index+1); .u-grade_item "); $ item.click (function () {var $ this = $ (this); /*определить переменную для сохранения текущего объекта $ item* /var index = $ this.parent (". u-grade "). Дети (". U-grade_item "). Индекс ($ this); // Вернуть позицию индекса. element/ *alert (index);A: Я не буду говорить о реализации кода один за другим. Вы можете прочитать комментарии. Таким образом, пользователь нажимает, чтобы создать эффект. Есть только последний ниже. Назначьте значение звезды, нажатой пользователем данных.
Легко прояснить:
(function () {var $ item = $ (". u-grade .u-grade_item"); $ item.click (function () {var $ this = $ (this); var index = $ this.parent (". u-grade_item"). Индекс ($ this); var star = $ (this). Pparent (". u-crade"). Чтобы изменить исходное значение данных $ .SetGrade ($ this.parent (), index);Хорошо, все содержание этой статьи было представлено. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!