【CSS・JQuery】星の評価・レビュー(小数値も反映させる方法）

口コミサイトでよく見かける”星のレビュー”について、「3.8」「2.6」などの小数値に応じて、CSSで星の色付けを厳密に行うことを考えました。

先に完成版の表示例を載せておきます。

分かりづらいですが、レビュー値5の星が100%色付けされているのに対して、各レビューの星は値に応じて色付けされています。

作成前の課題と解決策

【活用させて頂いたCSS】
CSSのみで星評価レーティングをデザインする方法

今回、CSSについては上記をそのまま活用させて頂きました。そのため、CSSで星評価レーティングをデザインする方法については、上記ブログを確認して頂ければと思います！とても分かりやすくまとめて下さっています！！

現時点で、星の評価レビューをデザインすることはCSSで達成できているため、今回実現したい「小数値対応」について、方針立てていきます。

以下に現状課題と解決策をまとめました。

【現状課題】
・cssで設定しているレビュー値以外には対応できない。（現状は、0〜5までの0.5刻みのレビュー値には対応可）
・しかし、「3.8」「2.6」など細かく刻んだレビュー値については、色付けできない。

【解決策】
.star5_ratingクラスを持つ要素（星要素）に対して、下記のようにレビュー値に対応したCSSを動的に追加していく。

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5*/

例えば「★3.8」のレビューに対しては下記のCSSを追加する。
.star5_rating[data-rate="3.8"]:after{ width: 76%; } /* 星3.8 */
widthの値は、(3.8÷5)×100 % で算出。

■作成したプログラム
プログラムはJQueryで作成しました。

方針としては、レビュー値を元に、追加したいCSSを文字列として生成。
.star5_rating[data-rate="レビュー値"]:after{ width: レビュー値で算出%; } 

そして、生成したCSS文字列をstyle要素に書き込み、bodyに追加する。

作成コードは以下になります。

$('.star5_rating').each(function (index, e) {
 //　レビューの値
 let starRate = $(this).data('rate');

 //　0.5で割り切れない場合
 if(starRate%0.5!==0){
   //　widthの値
   let widthRate = Math.round(((starRate / 5) * 100), 2);

   //　追加する疑似要素（星のレビュー値のdata-rate値、widthを設定する
   let css = '.star5_rating[data-rate="' + starRate + '"]:after{width:' + widthRate + '%;}';

   //　style要素を作成してCSSを設定
   let style = $('<style>')
   style.text(css);

   //　style要素を全体に追加
   $('body').append(style);
   }
});

以上が、星の評価・レビューで「小数値もデザイン反映させる方法」でした。

最後までお読み下さり、ありがとうございました！！