Несколько Star Review на той же странице

Question

У меня есть многостраничная форма, и на одной из страниц у меня есть приложение для просмотра звезд, в котором пользователи могут голосовать от 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; 
} 

Answer 1

Я получил это работает, изменив имя радио и сохраняя уникальные идентификаторы.

Кнопки радиосвязи сгруппированы по имени, чтобы каждый представлял значение для определенной формы «переменная». При каждом наборе звезд, представляющих другую переменную, рейтинг продукта, каждая группа должна иметь отдельное имя, отражающее, какой продукт они предназначены, например. добавление идентификатора продукта, 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>