Как сделать звездный рейтинг с вводом значений?
Подскажите пожалуйста как сделать что-бы инпут взаимодействовал со звездами, то-есть если в инпут написали 4 то и окрашенных звезд 4. Сейчас звезды меняются если в value через html задать цифру. Спасибоsnippet
Дополнительно:
Вам для начала надо сделать так, чтобы сами звёзды работали нормально.
Необходимо повесить событие на инпут и в зависимости от числа выводить n-ое количество звёзд.
- А не подскажите какое событие? я еще не очень разбираюсь в jquery и js
- bett22, советую почитать: https://learn.javascript.ru/events-change.
И на мой взгляд следует сразу отказаться от jQ, так как такой функционал легко реализовать через ванильный JS. Да и подтягивать jQ для мелких нужд не особо резонно. - Дмитрий Кузнецов, спасибо, почитал и переписал на ванильный js и все работает)
- bett22, не за что! Удачи вам в ваших начинаниях.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания звездного рейтинга с возможностью ввода значений можно использовать HTML, CSS и JavaScript. Ниже приведен пример кода, который позволит пользователю выбирать оценку, нажимая на звездочки.
HTML:
```html
```
CSS:
```css
.rating {
display: flex;
}
.rating input {
display: none;
}
.rating label {
cursor: pointer;
width: 30px;
height: 30px;
background-image: url('star.png'); /* Подставьте свою иконку звезды */
}
.rating input:checked + label {
background-image: url('star-filled.png'); /* Подставьте свою иконку заполненной звезды */
}
```
JavaScript:
```html
const stars = document.querySelectorAll('.rating input');
stars.forEach(star => {
star.addEventListener('click', function() {
stars.forEach(s => {
if (s.value <= this.value) {
s.checked = true;
} else {
s.checked = false;
}
});
});
});
```
В данном примере каждая звезда представлена в виде input с типом radio и метки label. При клике на звезду, все предыдущие звезды до выбранной также становятся выбранными. Таким образом, пользователь может выбрать оценку от 1 до 5 звезд.
Не забудьте заменить 'star.png' и 'star-filled.png' на пути к вашим иконкам звезд.