Question

我使用了一些星级评分系统的代码，使用了一些在线资源。系统工作正常，但我面临一个问题。如果页面中有多个星级评分实例，当我点击评级时，我设置的先前评级将重置。这就像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>

Answer 1

如果你正在使用那个确切的代码但是乘以它因为你不改变每个实例的输入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>

星级评分系统：仅适用于一个实例

1 个答案: