,

[HTML & CSS General] CSS と jQuery を利用した Star Rating

公開日: 2015/01/19
更新日: 2018/10/29

memo.

CSS

CSS のみの実装例。IE 9+。

/ star
%span.rating
  %input#rating-input-1-5.rating-input(type="radio" name="rating-input-1" value="5")
  %label.rating-star(for="rating-input-1-5")
  %input#rating-input-1-4.rating-input(type="radio" name="rating-input-1" value="4")
  %label.rating-star(for="rating-input-1-4")
  %input#rating-input-1-3.rating-input(type="radio" name="rating-input-1" value="3")
  %label.rating-star(for="rating-input-1-3")
  %input#rating-input-1-2.rating-input(type="radio" name="rating-input-1" value="2")
  %label.rating-star(for="rating-input-1-2")
  %input#rating-input-1-1.rating-input(type="radio" name="rating-input-1" value="1")
  %label.rating-star(for="rating-input-1-1")

Cmpass CSS Sprites で用意した画像を利用した場合、こんな形で機能しました。

.rating {
  overflow: hidden;
  display: inline-block;
  font-size: 0;
  position: relative;
}
.rating-input {
  float: right;
  width: 29px;
  height: 25px;
  padding: 0;
  margin: 0 0 0 -29px;
  @include opacity(0);
}
.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
  @extend .sprites_star--on;
}
.rating-star,
.rating:hover .rating-star {
  position: relative;
  float: right;
  display: block;
  @extend .sprites_star--off;
}

また、一般兄弟セレクタ (general sibling selectors) 、~ (チルダ) を使うよう。

ただし、:checked セレクタを利用しているため、触れられているとおり IE 7/8 で機能しない。

CSS + jQuery

IE 8 以下に対応するには、.checked という Class を用意し、jQuery で .addClass, .removeClass するようだ。

HTML はそのまま。
CSS は、:checked の部分を .checked へ変更する。

.rating-input.checked ~ .rating-star {

jQuery で以下を用意する。

$(document).ready(function(){
  'use strict';
  // Star Rating
  $('.rating input:radio').attr('checked', false);
  $('.rating input').click(function () {
    $('.rating .rating-input').removeClass('checked');
    $(this).addClass('checked');
  });
  $('input:radio').change(
  function(){
    var userRating = this.value;
    alert(userRating);
  });
});

後半は、選択された value を確認するダイアログ表示用。

補遺