У меня многостраничная форма, и на одной из страниц у меня есть приложение для звездного просмотра, благодаря чему пользователи могут голосовать от 1 до 5 звезд. У меня он работает отлично, однако на той же странице мне нужно это несколько раз (т. Е. Разные вещи для обзора).
Я пробовал несколько вещей; меняя класс «звезд» и «звезд», но ни один из них не допускает множественные рейтинги – все они возвращаются к первому (т. е. если вы выбираете 2 звезды во второй, он также по умолчанию устанавливает первый выбор на 2 звезды или выбирает только первый выбор до 2-х звезд). Есть идеи?
Код HTML:
<div class="stars"> <input type="radio" name="star" class="star-1" id="star-1" /> <label class="star-1" for="star-1">1</label> <input type="radio" name="star" class="star-2" id="star-2" /> <label class="star-2" for="star-2">2</label> <input type="radio" name="star" class="star-3" id="star-3" /> <label class="star-3" for="star-3">3</label> <input type="radio" name="star" class="star-4" id="star-4" /> <label class="star-4" for="star-4">4</label> <input type="radio" name="star" class="star-5" id="star-5" /> <label class="star-5" for="star-5">5</label> <span></span> </div> CSS:
form .stars { background: url("stars.png") repeat-x 0 0; width: 150px; margin: 0 auto; } form .stars input[type="radio"] { position: absolute; opacity: 0; filter: alpha(opacity=0); } form .stars input[type="radio"].star-5:checked ~ span { width: 100%; } form .stars input[type="radio"].star-4:checked ~ span { width: 80%; } form .stars input[type="radio"].star-3:checked ~ span { width: 60%; } form .stars input[type="radio"].star-2:checked ~ span { width: 40%; } form .stars input[type="radio"].star-1:checked ~ span { width: 20%; } form .stars label { display: block; width: 30px; height: 30px; margin: 0!important; padding: 0!important; text-indent: -999em; float: left; position: relative; z-index: 10; background: transparent!important; cursor: pointer; } form .stars label:hover ~ span { background-position: 0 -30px; } form .stars label.star-5:hover ~ span { width: 100% !important; } form .stars label.star-4:hover ~ span { width: 80% !important; } form .stars label.star-3:hover ~ span { width: 60% !important; } form .stars label.star-2:hover ~ span { width: 40% !important; } form .stars label.star-1:hover ~ span { width: 20% !important; } form .stars span { display: block; width: 0; position: relative; top: 0; left: 0; height: 30px; background: url("stars.png") repeat-x 0 -60px; -webkit-transition: -webkit-width 0.5s; -moz-transition: -moz-width 0.5s; -ms-transition: -ms-width 0.5s; -o-transition: -o-width 0.5s; transition: width 0.5s; }
Я заработал, изменив имя радио и сохранив уникальные идентификаторы.
Радио кнопки сгруппированы по имени, чтобы каждый представлял значение для конкретной формы «переменная». При каждом наборе звезд, представляющих другую переменную, рейтинг продукта, каждая группа должна иметь отдельное имя, отражающее, какой продукт они, например, добавляет идентификатор продукта, name="star-123456" . Вы также можете добавить индекс продукта в список элементов для формы.
Идентификаторы всегда должны быть уникальными среди элементов. В этом случае идентификаторы радиоввода должны быть уникальными для того, чтобы атрибуты «для атрибута» указывали на правый.
Ниже приведенный ниже фрагмент содержит уникальные имена для двух групп радиосвязи и уникальные идентификаторы для каждого радиовхода.
form .stars { background: gray; width: 150px; margin: 0 auto; } form .stars input[type="radio"] { position: absolute; opacity: 0; filter: alpha(opacity=0); } form .stars input[type="radio"].star-5:checked ~ span { width: 100%; } form .stars input[type="radio"].star-4:checked ~ span { width: 80%; } form .stars input[type="radio"].star-3:checked ~ span { width: 60%; } form .stars input[type="radio"].star-2:checked ~ span { width: 40%; } form .stars input[type="radio"].star-1:checked ~ span { width: 20%; } form .stars label { display: block; width: 28px; height: 28px; border: 1px solid black; margin: 0!important; padding: 0!important; text-indent: -999em; float: left; position: relative; z-index: 10; background: transparent!important; cursor: pointer; } form .stars label:hover ~ span { background-position: 0 -30px; } form .stars label.star-5:hover ~ span { width: 100% !important; } form .stars label.star-4:hover ~ span { width: 80% !important; } form .stars label.star-3:hover ~ span { width: 60% !important; } form .stars label.star-2:hover ~ span { width: 40% !important; } form .stars label.star-1:hover ~ span { width: 20% !important; } form .stars span { display: block; width: 0; position: relative; top: 0; left: 0; height: 30px; background: red; filter: alpha(opacity=0); -webkit-transition: -webkit-width 0.5s; -moz-transition: -moz-width 0.5s; -ms-transition: -ms-width 0.5s; -o-transition: -o-width 0.5s; transition: width 0.5s; }
<form> <div class="stars"> <input type="radio" name="star_a" class="star-1" id="star_a-1" /> <label class="star-1" for="star_a-1">1</label> <input type="radio" name="star_a" class="star-2" id="star_a-2" /> <label class="star-2" for="star_a-2">2</label> <input type="radio" name="star_a" class="star-3" id="star_a-3" /> <label class="star-3" for="star_a-3">3</label> <input type="radio" name="star_a" class="star-4" id="star_a-4" /> <label class="star-4" for="star_a-4">4</label> <input type="radio" name="star_a" class="star-5" id="star_a-5" /> <label class="star-5" for="star_a-5">5</label> <span></span> </div> <div class="stars"> <input type="radio" name="star_b" class="star-1" id="star_b-1" /> <label class="star-1" for="star_b-1">1</label> <input type="radio" name="star_b" class="star-2" id="star_b-2" /> <label class="star-2" for="star_b-2">2</label> <input type="radio" name="star_b" class="star-3" id="star_b-3" /> <label class="star-3" for="star_b-3">3</label> <input type="radio" name="star_b" class="star-4" id="star_b-4" /> <label class="star-4" for="star_b-4">4</label> <input type="radio" name="star_b" class="star-5" id="star_b-5" /> <label class="star-5" for="star_b-5">5</label> <span></span> </div> </form>