Звездный рейтинг с html и javascript не работает в правильном порядке
Я попытался создать звездную рейтинговую систему с помощью HTML и JavaScript, но она не работает должным образом.
Вместо того, чтобы работать слева направо, он работает в обратном направлении — справа налево. Например, если я нажму на четвертую звезду, она окрасит четыре звезды справа налево, а не слева направо, так что первая звезда останется неокрашенной.
Кто-нибудь может подсказать, как исправить эту проблему?
function fillStars(num) {
for (var i = 1; i <= 5; i++) {
var star = document.getElementById('star' + i.toString());
if (i <= num) {
star.checked = true;
} else {
star.checked = false;
}
}
}.rating {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.rating input[type = "radio"] {
display: none;
}
.rating label {
font-size: 60px;
margin-right: 10px;
cursor: pointer;
}
.rating label::before {
content: "\2606";
display: inline-block;
width: 1.1em;
text-align: center;
}
.rating label.checked::before {
content: "\2605";
color: gold;
}
.rating label.checked~label::before {
content: "\2605";
color: gold;
}
.rating input[type = "radio"]:checked {
content: "\2605";
color: gold;
}
.rating input[type = "radio"]:checked~label::before {
content: "\2605";
color: gold;
}<div class = "form-name">
<fieldset class = "rating">
<legend>Bewertung:</legend>
<input type = "radio" id = "star1" name = "rating" value = "1" onclick = "fillStars(1)" />
<label for = "star1" title = "1 Stern"></label>
<input type = "radio" id = "star2" name = "rating" value = "2" onclick = "fillStars(2)" />
<label for = "star2" title = "2 Sterne"></label>
<input type = "radio" id = "star3" name = "rating" value = "3" onclick = "fillStars(3)" />
<label for = "star3" title = "3 Sterne"></label>
<input type = "radio" id = "star4" name = "rating" value = "4" onclick = "fillStars(4)" />
<label for = "star4" title = "4 Sterne"></label>
<input type = "radio" id = "star5" name = "rating" value = "5" onclick = "fillStars(5)" />
<label for = "star5" title = "5 Sterne"></label>
</fieldset>
</div>Пожалуйста, уточните вашу конкретную проблему или предоставьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Как сейчас написано, трудно точно сказать, о чем вы спрашиваете.
«если я нажму на четвертую звезду, она будет окрашивать четыре звезды справа налево, а не слева направо» — на самом деле это не то, что происходит с кодом, который вы показали — jsfiddle.net/q318ramf
@CBroe Извините, я забыл поделиться своим css. Я редактирую это выше
Ваша функция JavaScript здесь совершенно излишня - все, что она делает, устанавливает переключатель, который уже был проверен (потому что пользователь щелкнул его), снова отмечен. Окраска звезд основана исключительно на CSS. input[type = "radio"]:checked~label выбирает все ярлыки, которые идут после отмеченного переключателя. CSS не может выбрать «другое» направление.
Итак, чтобы это работало правильно, вам нужно: а) изменить порядок ваших переключателей в HTML - нужно начинать с 5, опускаясь до 1; и б) снова изменить визуальный порядок, используя flex-direction: row-reverse; на контейнере.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Пожалуйста, замените приведенный ниже код в css:
.rating {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}Надеюсь, это решит вашу проблему.
Прежде всего, ваш цикл for не имеет особого смысла, так как можно проверить только один элемент radio группы. Вы можете вообще удалить этот фрагмент. Меток достаточно, чтобы сделать нужный радиоэлемент кликабельным.
Затем вам нужно подумать о CSS. Вы хотите сделать все после проверенного радиоэлемента пустой звездой, поэтому ввод должен идти после звезды.
В любой момент времени может быть выбрана только одна радиокнопка из группы радиокнопок.