4

我使用来自一些在线资源的一些位来使用星级评分系统的代码。该系统工作正常，但我面临一个问题。如果一个页面中有多个星级实例，当我点击一个评级时，我之前设置的评级会重置。就像 CSS 一次只能用于一个评级实例一样。我想评价多个项目，但它只让我评价一个。

这是CSS：

.starRating{
  display        : inline-block;
  position       : relative;
  height         : 24px;
  background     : url('../images/stars.png') repeat-x 0 0;
  vertical-align : bottom;
}

.starRating div{
  float    : left;
  position : relative;
  height   : 24px;
}

.starRating input{
  position : relative;
  z-index  : 1;
  width    : 24px;
  height   : 24px;
  margin   : 0;
  padding  : 0;
  opacity  : 0;
}

.starRating label{
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 24px;
}

.starRating span{
  display : none;
}

.starRating       input:checked       + label,
.starRating:hover input:checked:hover + label{
  background : url('../images/stars.png') repeat-x 0 -24px;
}

.starRating:hover input:checked + label{
  background : transparent;
}

.starRating:hover input:hover + label{
  background : url('../images/stars.png') repeat-x 0 -48px;
}

和 html ：

<div class="starRating">
  <div>
    <div>
      <div>
        <div>
          <input id="rating1" type="radio" name="rating" value="1">
          <label for="rating1"><span>1</span></label>
        </div>
        <input id="rating2" type="radio" name="rating" value="2">
        <label for="rating2"><span>2</span></label>
      </div>
      <input id="rating3" type="radio" name="rating" value="3">
      <label for="rating3"><span>3</span></label>
    </div>
    <input id="rating4" type="radio" name="rating" value="4">
    <label for="rating4"><span>4</span></label>
  </div>
  <input id="rating5" type="radio" name="rating" value="5">
  <label for="rating5"><span>5</span></label>
</div>
4

1 回答 1

4

如果您使用的是确切的代码但相乘，那么它是因为您没有更改每个实例的输入 name="" 。每个名称只能同时选择一个单选按钮。

尝试这样的事情：

<div class="starRating">
  <div>
    <div>
      <div>
        <div>
          <input id="rating1" type="radio" name="rating" value="1">
          <label for="rating1"><span>1</span></label>
        </div>
        [...]
</div>

<div class="starRating">
  <div>
    <div>
      <div>
        <div>
          <input id="rating1" type="radio" name="rating-two" value="1">
          <label for="rating1"><span>1</span></label>
        </div>
        [...]
</div>
于 2013-11-06T12:32:45.213 回答