☆マークの評価を投票する
jQueryはとても便利でいろいろなプラグインがありますね。
jquery.sexy-vote.js を使うと☆マークで投票することができます。
■jquery.sexy-vote.js 本体
http://www.koders.com/javascript/fid3D1A93337E40FFF1F6D4B116321F3D6F8EBFF79F.aspx?s=document
ただこれをそのまま使って、一回クリックして評価を決めてしまうと、
もう一度☆にマウスオーバーしても動きません。
レビュー投稿等で一緒にコメント書いて投稿ボタン押下でサブミット
のような処理をしたいときに困りました。
というわけで動くように改造してくれやがりました。
バグっていたら申し訳ありません。
改造版
jQuery.fn.sexyVote = function(config) { config = config || {}; var score = 0; var defaults = { activeImageSrc: "active_star.gif", passiveImageSrc: "passive_star.gif", maxScore: 5, fn: new Function(), messages: [ "悪い", "ふつう", "良い", "なかなか良い", "非常に良い", "最高に良い" ] }; config = jQuery.extend(defaults, config); return this.each(function() { var $container = jQuery(this); for (var i = 0, num = config.maxScore; i < num; ++i) { //stars というspan要素を作り、そこに対してmouseOverとかmouseOutイベントを設定する (jQuery("<span />").attr("class", "stars").append(jQuery("<img />")).append(jQuery("<img />"))).appendTo($container); } jQuery("<span />").attr("class", "sexyMsg").appendTo($container); $container.find("span.sexyMsg"). text(config.messages[0]); var stars = $container.find("span.stars"); // img:even(偶数番目のimgタグ)をpassiveImagesrcにしました var passiveImages = stars.find("img:even"); // passiveImageを初期化 passiveImages. attr("src", config.passiveImageSrc). css({display: "inline"}); //奇数番目をactiveImageSrcにしました var activeImages = stars.find("img:odd"); //activeImageを初期化 activeImages. attr("src", config.activeImageSrc). css({display: "none"}); // starsのonMouseOutイベント stars.bind("mouseout", function(e){ $container.find("img:even").css({display: "inline"}); $container.find("img:odd").css({display: "none"}); var len = sexyVote.score; $container.find("img:even").slice(0, len).css({display: "none"}); $container.find("img:odd").slice(0, len).css({display: "inline"}); $container.find("span.sexyMsg").text(config.messages[len]); }); // starsのonMouseOverイベント stars.bind("mouseover", function(e){ $container.find("img:even").css({display: "inline"}); $container.find("img:odd").css({display: "none"}); var len = Math.max($container.find("img:even").index(e.target) , $container.find("img:odd").index(e.target)) + 1; $container.find("img:even").slice(0, len).css({display: "none"}); $container.find("img:odd").slice(0, len).css({display: "inline"}); $container.find("span.sexyMsg").text(config.messages[len]); }); stars. bind("click", function(e) { config.fn.call(this, e, $container.find("img:odd").index(e.target) + 1); sexyVote.score = $container.find("img:odd").index(e.target) + 1; $container.find("input").val(sexyVote.score); sexyVote.clicked = true; }); }); }; var sexyVote = { score: 0, idx: -1, isMouseOver: false, isMouseOut: false, clicked: false };