Интересно, как это возможно?
А теперь одолжи мне свои 4 минуты на поездку.
Что вам нужно знать, чтобы построить эту простую систему;
html, css, Javascript, работа с DOM.
Мы начнем с создания простого HTML-документа или страницы.
На этой простой html-странице, помимо базовой структуры документа, есть неупорядоченный список и элементы списка, которые содержат символы сущности html для печати звездообразной формы в текстовом содержимом элементов списка.
Раздел для хранения результатов взаимодействия с пользователем и тег script, который поможет мне указать на мой внешний файл javascript.
наш HTML готов и установлен для нашей системы.
Теперь давайте быстро двигаться и стилизовать нашу страницу для лучшего макета и внешнего вида.
Если вы были достаточно увлечены, вы узнали, что мы добавили атрибут класса к элементам на нашей html-странице. Я использовал классы для оформления своей страницы, как показано в этом фрагменте. Я использовал тег стиля html в разделе заголовка для оформления моей html-страницы, но вы также можете решить создать внешнюю ссылку css и ссылку, используя элемент ссылки.
Сказано и сделано, давайте перейдем к сценарию для функциональности.
В приведенном выше сценарии мы хотим выполнить действие на странице только после загрузки содержимого DOM, поэтому мы начинаем с прослушивания события DOMContentLoaded объекта документа.
После загрузки он вызывает мою функцию обратного вызова, которая передается в качестве аргумента прослушивателю событий. В функции ratingStars у нас есть цикл for, который перебирает html-коллекцию элементов с классом star.
Обратите внимание, что мы вызываем функцию ratingStarElement в цикле for со свойством length, потому что у нас есть функция ratingStarElement, которая возвращает HTMLCollenction который выглядит как массив и имеет свойство длина точно так же, как массив, и является итерируемым.
Внутри цикла for мы добавляем прослушиватель событий, который прослушивает любое событие клика по каждому элементу в форме звезды, который вызывает функцию ratingStarClickHander и связывает аргументы, когда есть какое-либо действие клика.
Функция принимает два параметра, индекс и событие:
index — позиция щелкнутого элемента li в коллекции (индексирование с нуля)
event — действие от пользователя, для нашего случая действие по клику.
Первый оператор if проверяет, истинно ли событие — событие может быть истинным только тогда, когда оно произошло, затем мы идентифицируем элемент, на который нажали, мы получаем родительский элемент, а затем получаем все его дочерние элементы, одноуровневые элементы целевого элемента. Родительские братья и сестры возвращают HTMLCollection.
Мы перебираем все дочерние элементы и удаляем оранжевый класс, если он есть.
Во втором операторе if мы проверяем, не имеет ли выбранный целевой элемент предыдущего родственного элемента — у вас может не быть предыдущего родственного элемента, только если вы первый.
Если это не первый дочерний элемент, мы добавим класс orange ко всем одноуровневым элементам, которые были до целевого элемента и самого целевого элемента.
В противном случае мы просто добавим класс только к целевому элементу.
— целевой элемент: — это элемент html, над которым произошло действие.
Так как мы сказали, что индекс в HTMLCollection основан на 0, а рейтинг начинается с 1 по 5, мы должны добавлять 1 к индексу элемента, который щелкают каждый раз, чтобы получить ожидаемый результат.
Наконец, мы вызываем функцию addTextContent, которая принимает два аргумента: — имя класса и текст.
Эта функция возвращает текстовое содержимое, добавленное к HTML-элементу указанного класса, а также вызывает другую функцию, которая возвращает HTML-элемент указанного класса.
Теперь мы закончили, и мы можем, наконец, протестировать наш код: —
Спасибо, что прочитали этот блог для начинающих, и это все, что у меня есть для вас на сегодня, до следующего раза.
