JS星評価実現

説明:
この方法はJqueryライブラリを採用し,互換性IE 8バージョンを一時的に検出する.本例の2色の星はいずれもpng画像に入っており,もちろん他にもいくつかの実装構想がある.この例では、現在のページに星評価が1つしかない場合を示します.
考え方:
星表示要素の、mouseenter、mouseout、clickの3つのイベントをリスニングすることで、星表示の個数を表示します.ここで、現在選択されている星の値と現在の一時的な星の値を格納するために2つの変数(temp_value,choice_value)を使用しました.

　　　temp_value:一時的な星の値;

      choice_value:選択した星の値;

mouseenter:マウスを移動し、現在存在する星レベル付与temp_を取得value、現在の星の画像の色を調整します.

mouseout:マウスを削除し、choiceを比較します.value値を設定し、星の画像の色を再調整します.

click:マウスをクリックすると、現在の星の値を取得し、choice_に値を割り当てます.value;(clickの前にmouseenterイベントが行われ、clickの後にmouseoutイベントが行われたことに注意)

選択値が完了した後、評価値を提出する必要がある場合、JSで変数choice_を取得することができるvalueの値;

HTML構造コード:

    <h1>  ：</h1>

    <ul id="star">

        <li title="  " id="star1" star="1"></li>

        <li title=" " id="star2" star="2"></li>    

        <li title="  " id="star3" star="3"></li>

        <li title=" " id="star4" star="4"></li>

        <li title="  " id="star5" star="5"></li>

    </ul>

注意:ページに星の評価が1つ以上ある場合、つまり複数行がある場合は、Domのliのidをいくつか改造し、ダイナミックな下付きを加えて、異なる要素を区別する必要があります.もう一つのポイントは、私が選んだ星の値をJS変数に入れた場合、複数の評価値の場合、Domに隠しフォームドメインを加えて選択した現在の星の値を保存することをお勧めします.
JS実装コード:

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript"> $(document).ready(function() { var _temp_value = 0,//  hover    value

                choiceValue = 0;//         1



            //       

            $("#star li").mouseenter(function() { //       

                _temp_value = new Number($(this).attr("star")); showStar(); //       

            }).mouseout(function(){ hideStar(); //       

            }).click(function(){ //   ，        

                choiceValue = _temp_value;
　　　　　　　　hideSatr();　　 }); //    

            function showStar() { for (var i = 1 ; i < _temp_value+1; ++i) { $("#star"+i).addClass("choice"); } } function hideStar() { for (var i = 5 ; i > choiceValue; --i) { $("#star"+i).removeClass("choice"); } } }); </script>

問題があれば、連絡してください.ここはDemoアドレス:http://xiaoweijs.duapp.com/demo/star-level/index.html