【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);
}
});
以上が、星の評価・レビューで「小数値もデザイン反映させる方法」でした。
最後までお読み下さり、ありがとうございました!!
この記事が気に入ったらサポートをしてみませんか?