在同一页上的多星评论 [英] Multiple Star Review on Same Page

问题描述

我有一个多页的表单，在其中一个页面上有一个星级评论应用程序，用户可以在1到5星之间投票。我有它的工作很好，但在同一页上，我需要这个多次（即不同的东西审查）。

I have a multi-page form and on one of the pages I have a star-review application, whereby users can vote between 1 and 5 stars. I have it working great, however on the same page I need this multiple times (i.e. different things to review).

我尝试了很多事情;改变'星星'和'星'的类别，但是不允许多个评级 - 它们都触发回第一个（即如果你在第二个选择2星，它也默认第一个选择为2星，或者只选择第一选择到2星）。任何想法？

I have tried a number of things; changing the class of 'stars' and 'star', but neither allows multiple ratings - they all trigger back to the first one (i.e. if you select 2 star on the second it also defaults the first selection to 2 star, or only selects the first selection to 2 star). Any ideas?

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;
}

推荐答案

单选按钮按名称分组，以便每个表示特定表单变量的值。每个星号表示不同的变量，产品的评级，每个组应该有一个单独的名称，反映他们的产品。附加产品ID， name =star-123456。您还可以将该产品的索引附加到表单项目列表中。

Radio buttons are grouped by name so that each represents a value for a particular form "variable". With each set of stars representing a different variable, a product's rating, each group should have a separate name reflecting which product they're for e.g. appending the product id, name="star-123456". You could also append the index of the product in the list of items for the form.

ID在元素之间应始终是唯一的。在这种情况下，无线电输入ID应该是唯一的，用于标签的属性指向正确的。

IDs should always be unique among elements. In this case the radio input ids should be unique for the labels' for attribute to point to the right one.

下面的代码段包含两个无线电组的唯一名称，每个无线电输入的唯一ID。

The snippet below contains unique names for the two radio groups and unique IDs for each radio input.

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>

这篇关于在同一页上的多星评论的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！