А я так сделал. function sendInfoToBackend(stars) { console.log(stars); } document.addEventListener("click", (event) => { if (event.target.dataset.itemValue) { const { itemValue } = event.target.dataset; event.target.parentNode.dataset.totalValue = itemValue; sendInfoToBackend(itemValue); } }); Один слушатель, и от него проще отписываться.
Когда-то смотрел видио хауди месяц 2назад вспомнил про рекламу о тебе я искал видио хауди час нашёл и подписался потомушто знаю что хауди рекламует только годнути спасибо за видио
Оч крутой канал! Много полезной инфы, но тут хочу небольшое замечание сделать. 1) если нужно перебрать коллекцию, то самый простой способ [...collection].forEach. Либо так: Array.from(collection, node => {}) 2) не очень хорошая практика навешивать слушатели а каждую ноду, т.к. за это придётся платить памятью, а в дальнейшем и фпс. Выход: навесить слушатель на родительскую ноду, а в коллбэке проверять, что клик был по дочерней. Этот подход называется делегация. Ни в коем случае не пытался захейтить ваш труд.
Ренат, спасибо за положительную конструктивную обратную связь. В комментариях, уже поступило много интересных полезных комментариев на тему того, как можно еще улучшить данный рейтинг. И я хочу их объединить и добавить закрепленный комментарий. Буду вам признателен если напишите мне в телегу, я скину вам песочницу с текущей реализацией, и вы сможете максимально быстро написать предложенную вами реализацию по клику и перебору. Ссылку на вашу песочницу так же добавлю в закрепленный коммент.
Контент на уровне, как всегда лайк ! Только уже второе видео подряд где есть JS у меня ничего не работает, хотя пишу все точь в точь и скрипт подключен )
Виталий, если будет возможность, расскажи, пожалуйста, как добиться эффекта рассеивания цвета фона фотографии на "соседний фон" рядом с фотографией (как в новом дизайне Facebook на странице профиля). И спасибо тебе за всю твою работу, она очень здорово помогает (я про видео на канале)!!!
Можно не переводить в массив, но тогда просто добавить полифилл для интернет эксплорера. Так что все было правильно у Вас. Вы же не виноваты, что експлорер ничего не поддерживает. Что теперь, отказываться от новинок?)
Написал на SCSS и чёт не работает, посмотрел в скомпилированый CSS а там отступ между .rating [data-total-value="1"] а должно быть вместе, как исправить?)
Виталий, а вы сами верстали свой сайт-портфолио? Просто интересно почему у вас в версии для планшетов верстка немного съезжать начинает) imgur.com/KPqzvIY
Что мешало закрашивать все звездочки когда курсор поверх, кроме тех, которые идут дальше? Ответ - ничего. Флексы тут нужны чтоб расположить как-то звездочки в строке, но не надо их переворачивать. Как как только направление строки было развернуто, реализация строго привязалась к количеству элементов. Это плохо.
😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka
❓ Запись на консультацию - prosto-razrabotka.ru/
✨ Telegram канал - t.me/prostorazrabotka/
🔥 Telegram чат - t.me/prostorazrabotkachat/
Можете добавиться в друзья:
📷 Instagram - instagram.com/vitaliy.kirenkov/
📘 ВКонтакте - vk.com/vitaliy.kirenkov/
📗 Facebook - facebook.com/vitaliy.kirenkov/
📙 LinkedIn - www.linkedin.com/in/kirenkov/
✏️ Twitter - twitter.com/VitaliyKirenkov/
А так же, подписаться на страницы:
📘 ВКонтакте - vk.com/public195137161/
📗 Facebook - facebook.com/prostorazrabotka/
оказывается это так просто)😮😄спасибо большое, всё максимально просто, понятно👍
Как будто мои мысли прочёл, не могу описать словами как я рад этому видео))) спасибо за то что ты делаешь
Рад слышать -)
Оч круто, что можно найти отдельно столько много отдельной практики и всё на 1 канале))
Ага -))
Классная тенденция ролики про практику! Мне нравится
Отлично
Как же круто ты объясняешь)
Просто. Коротко. Понятно. Спасибо большое!)
Благодарю)
Виталий спасибо вам за огромный ваш труд!!
Благодарю -)
Как вам такая реализация?)
огонь!!! а есть где то исходный код? в песочнице например)
ДИВелоперская... Почему нельзя соблюдать семантику и использовать предназначенные для своих задач теги. Про доступность молчу.
нужно было на чистом css и грязном js! (два варианта)
А почему не используется делегирование события?
Вместо 5 онкликов, использовать один?
А я так сделал.
function sendInfoToBackend(stars) {
console.log(stars);
}
document.addEventListener("click", (event) => {
if (event.target.dataset.itemValue) {
const { itemValue } = event.target.dataset;
event.target.parentNode.dataset.totalValue = itemValue;
sendInfoToBackend(itemValue);
}
});
Один слушатель, и от него проще отписываться.
Спасибо мужик, туторы вышка!
Благодарю
Супер спасибо огромное!!!
Круто, давно хотел сделать звёздный рейтинг, спасибо!
*звездатый
Благодарю за данную информацию
Когда-то смотрел видио хауди месяц 2назад вспомнил про рекламу о тебе я искал видио хауди час нашёл и подписался потомушто знаю что хауди рекламует только годнути спасибо за видио
Оч крутой канал! Много полезной инфы, но тут хочу небольшое замечание сделать.
1) если нужно перебрать коллекцию, то самый простой способ [...collection].forEach. Либо так: Array.from(collection, node => {})
2) не очень хорошая практика навешивать слушатели а каждую ноду, т.к. за это придётся платить памятью, а в дальнейшем и фпс. Выход: навесить слушатель на родительскую ноду, а в коллбэке проверять, что клик был по дочерней. Этот подход называется делегация.
Ни в коем случае не пытался захейтить ваш труд.
Ренат, спасибо за положительную конструктивную обратную связь.
В комментариях, уже поступило много интересных полезных комментариев на тему того, как можно еще улучшить данный рейтинг. И я хочу их объединить и добавить закрепленный комментарий.
Буду вам признателен если напишите мне в телегу, я скину вам песочницу с текущей реализацией, и вы сможете максимально быстро написать предложенную вами реализацию по клику и перебору. Ссылку на вашу песочницу так же добавлю в закрепленный коммент.
Просто: разработка , в закреплённом комментарии уже предложили оч хороший вариант с наваливанием события на document.body
словно мысли читаешь, сегодня только об этом думал
Я услышал мысли -)
Супер! Полезная штука
Классно! Спасибо за урок)
Благодарю.
Посмотрев на название ролика,почему-то на ум приходит игра слов)
Да неееет... что вы... -)))
@@prosto_razrabotka ))))))))
И мне тоже... Даже не знаю, с чего бы это....))
Контент на уровне, как всегда лайк !
Только уже второе видео подряд где есть JS у меня ничего не работает, хотя пишу все точь в точь и скрипт подключен )
Ну чего скромничаем? Заглядываем в телеграм чат, разберемся.
Просто: разработка Как буду дома, сразу загляну !)
Спасибо за ваши видео!
Можно предложить тему на будущее:
Показать как делается голосование между двумя фото и участвует к примеру 128) и так до конца?
Дмитрий Ганин честно говоря, не понял о чем речь и каких 128?..
А что, если надо будет работать с числами с плавающей точкой. Через background-size заливать звездочку или есть другие варианты?
Да, там уже по другому, через какие-то позиционирования фона
А как насчёт a11y подхода с radio кнопками (возможно с использованием form)
Виталий, если будет возможность, расскажи, пожалуйста, как добиться эффекта рассеивания цвета фона фотографии на "соседний фон" рядом с фотографией (как в новом дизайне Facebook на странице профиля).
И спасибо тебе за всю твою работу, она очень здорово помогает (я про видео на канале)!!!
Решение найдено)) habr.com/ru/company/ruvds/blog/496958/
⭐⭐⭐⭐⭐
Спасибо
может лучше сделать вместо дивов инпуты, тогда будет доступно чекать с клавиатуры?
вы лучший
Спасибо, приятно слышать.
Можно не переводить в массив, но тогда просто добавить полифилл для интернет эксплорера. Так что все было правильно у Вас. Вы же не виноваты, что експлорер ничего не поддерживает. Что теперь, отказываться от новинок?)
Классно, спасибо, не нужно прикручивать громоздкий плагин.
у меня вот это не работает:
.rating[data-total-value='1'] .rating__item:nth-child(n + 5),
.rating[data-total-value='2'] .rating__item:nth-child(n + 4),
.rating[data-total-value='3'] .rating__item:nth-child(n + 3),
.rating[data-total-value='4'] .rating__item:nth-child(n + 2),
.rating[data-total-value='5'] .rating__item:nth-child(n + 1) {
color: orange;
}
У меня js не работает списал точь в точь всё равно не работает
Я первый поставил лайк!) ну после автора...
Автор лайк не ставил, значит был кто-то еще.. -)
что за плагины используете для форматтинга pug в html и *5?
Написал на SCSS и чёт не работает, посмотрел в скомпилированый CSS а там отступ между .rating [data-total-value="1"] а должно быть вместе, как исправить?)
Откуда ж я знаю, что у вас там написано?) приходите в телеграмм чат с песочницей, разберёмся
Виталий, а вы сами верстали свой сайт-портфолио? Просто интересно почему у вас в версии для планшетов верстка немного съезжать начинает)
imgur.com/KPqzvIY
Мое портфолио - моя песочница -) После последнего апдейта не учел, что либа которая строит сетку, работает на других точках.
@@prosto_razrabotka Вижу вы начинающий в верстке, если хотите могу всего лишь за отзыв помочь вам улучшить качество и надежность верстки)
круто
Спасибо
Сейчас думаю как можно сделать календарь, чтоб числа там были как карусель. Пока ничего в голову не приходит. Может знает кто как это сделать?
learn.javascript.ru/ui
Что за IDE?
VS Code
чет смешно ) звездочки у меня в обратную сторону выделяются ) при клике ))
кто-то на перемотке просмотрел что-то важное -)
@@prosto_razrabotka нет )просто последовательность перепутал цифр
Тыакс) кастом селекты и опции?)
Ты ж делал сам такой недавно -))
P.S. и да, такая штука тоже в планах есть.
Что мешало закрашивать все звездочки когда курсор поверх, кроме тех, которые идут дальше? Ответ - ничего. Флексы тут нужны чтоб расположить как-то звездочки в строке, но не надо их переворачивать. Как как только направление строки было развернуто, реализация строго привязалась к количеству элементов. Это плохо.
танцы с бубном для ослика, способствует тому что, разрабы ничего не меняют.
Думаю, там несколько сложнее...
Зачем ставить обработчики на звездочки? Что за рукожопство?
гдето есть ошибка
нихуя непонятно, но ооочень интересно.
[...document.querySelectorAll(".rating__item")]
Хм.... Хмммм.... Это ахрененно выглядит!!!)
Учитывать интернет эксплорер в 2020 это мовитон...
Когда начнёте делать крупные проекты, а не сайты-визитки, да лендосики, возвращайтесь, посмотрим, моветон или суровая реальность.
@@prosto_razrabotka 😜это больше крик души с удивлением что кто то его еще юзает...