4

オンラインのいくつかの情報源からいくつかのビットを使用して、星評価システムのコードを使用しました。システムは正常に動作しますが、1 つの問題に直面しています。ページに複数の星評価インスタンスがある場合、評価をクリックすると、以前に設定した評価がリセットされます。CSS が一度に 1 つの評価インスタンスに対してのみ機能するようです。複数のアイテムを評価したいのですが、評価できるのは 1 つだけです。

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