javascript - 5 つ星評価のフロント エンド UI グラフィカル メカニズム

Question

私は、機能的な観点から問題なく機能する 5 つ星の評価システムを持っています。

ユーザーが各星をクリックできるように、リスナーが接続された星の5つの個別の画像があります（このようにする必要があります）

各星には、データ評価 (1 ～ 5) と、jquery が選択して json オブジェクトに追加するデータ製品があります。

助けが必要なのは実際のグラフィックだけです

ユーザーが 4 つ星を選択すると、現在、4 つ目の星がコード化されて、クラスが選択された状態で表示されるように切り替えられます。

ユーザーが 4 を選択したときに、3、2、1 も選択されるようにしたい。同様に、気が変わって星 2 をクリックした場合は、4 と 3 を選択解除し、1 を選択したままにしておきます。

疑似セレクターを使用して純粋な CSS でこれを実現する方法があれば完璧です。そうでない場合は、jQuery で問題ありません。

読んでくれてありがとう

Answer 1

Jquery prevAll()を使用して、以前のすべての星のクラスを切り替えます:)

Answer 2

純粋なcssでこのようなことができます、

サンプル HTML:

<div data-rating='2'>
    <span class='star two'></span>
</div>

サンプルCSS:

.star{
    background: url('your-star-image-url') repeat;   
    height: 128px;
    width: 128px;
    float: left;
}
.two{
    width: 256px;
}

css では、a を繰り返してbackground-image、幅を操作することで星の数を制御できます

フィドル