【jQuery】スターでレーティング

プログラミング

サーバサイド言語は使わず、jQuery+HTMLで作りました。
(レーティングと言うんでしょうか、それともランキングと
言うんでしょうか…？ 星評価？)

【サンプル】
実演 : http://www.usamimi.info/~sutara/sample/rankStar/
DL : http://www.usamimi.info/~sutara/sample/rankStar/rankStar.zip



マウスオーバーで星が赤くなります。



クリックで評価を確定し、色が黄色になります。



評価を取り消すこともできます。

【ソースコード全文】


<!DOCTYPE html>

<html lang="ja">

  <head>

    <meta charset="UTF-8">

    <title>【jQuery】スターでレーティング</title>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

      //********************************************

      //グローバル変数（画像のパスを格納）

      //********************************************

      var img_on = 'rank_star_on.png';

      var img_set = 'rank_star_set.png';

      var img_off = 'rank_star_off.png';

      //********************************************

      //レーティング用関数

      //********************************************

      function rateStar(obj, is_on, is_set){

        var img_on_set = (is_set) ? img_set : img_on;

        if(is_on){

          $(obj).attr('src', img_on_set);

        }else{

          $(obj).attr('src', img_off);

        }

        $(obj).nextAll().attr('src', img_off);

        $(obj).prevAll().attr('src', img_on_set);

      }

      jQuery(document).ready(function($){

      //********************************************

        //イベントハンドラ

      //********************************************

        $('.stars img')

          .mouseover(function(){rateStar(this, true, false)})

          .mouseout(function(){rateStar(this, false, false)})

          .click(function(){

            //starsの中で何番目をクリックした？

            var num = $(this).parent().children().index(this);

            $(this).parent().attr('savedRate', num + 1);

            rateStar(this, true, true);

          });

        $('.rank_cancel').click(function(){

          //星を全て消し、記憶した評価も消す

          $(this).next().children().attr('src', img_off);

          $(this).next().attr('savedRate', '');

        });

        $('.stars').mouseout(function(){

          //星を全て消す

          $(this).children().attr('src', img_off);

          //初期値があればそれに戻す

          if($(this).attr('savedRate')){

            var num = $(this).attr('savedRate');

            var obj = $(this).children('img:nth-child(' +num+ ')');

            rateStar(obj, true, true);

          }

        });

        $('#check_result').click(function(){

          var result = '';

          $('.stars').map(function(idx, event){

            result += idx + '番目の評価' + $(this).attr('savedRate') + '\n';

          });

          alert(result);

        });

      });

    </script>

    <style>

      .stars img, .rank_cancel{

        cursor:pointer;

      }

    </style>

  </head>

  <body>

    <h3>【jQuery】スターでレーティング</h3>

    <div>

      <img src="rank_star_cancel.png" class="rank_cancel" title="評価を取り消す">

      <span class="stars"><img src="rank_star_off.png"><img src="rank_star_off.png"><img src="rank_star_off.png"><img src="rank_star_off.png"><img src="rank_star_off.png"></span>

    </div>

    <div>

      <img src="rank_star_cancel.png" class="rank_cancel" title="評価を取り消す">

      <span class="stars"><img src="rank_star_off.png"><img src="rank_star_off.png"><img src="rank_star_off.png"><img src="rank_star_off.png"><img src="rank_star_off.png"></span>

    </div>

    <div>

      <img src="rank_star_cancel.png" class="rank_cancel" title="評価を取り消す">

      <span class="stars"><img src="rank_star_off.png"><img src="rank_star_off.png"><img src="rank_star_off.png"><img src="rank_star_off.png"><img src="rank_star_off.png"></span>

    </div>

    <p><input type="button" id="check_result" value="評価した値を確認する"></p>

  </body>

</html>