pgoriの怠惰なブログ

適当なことを適当に書いていく日記

☆マークの評価を投票する

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
	};