html 星星評分源碼

css

.tip-word{margin-left:20px;color:red;}
.stars{margin: 8px;height:20px;}
.stars span{ float: left; line-height: 15px; }
.stars i{width: 15px; height: 15px; line-height: 15px; float: left; margin-right: 5px;background-position:center; background-image:url(images/star_gray.png);background-size: 100%; color: #fff; text-align: center; cursor:Pointer; font-style: normal;}
.stars .on{background-image:url(images/star.png);background-position:center;background-size: 100%;}

html

<div class="stars">
    <span>評價:</span>
    <for start="0" end="5" comparison="lt" step="1" name="i" >
        <i class="on"></i>
    </for>
    <span class="tip-word">非常好</span>
    <input id="point" type="hidden" name="point" value="5"/>
</div>

JS

<script>
    $(function(){
        /*
        * 鼠標點擊拔稳,該元素包括該元素之前的元素獲得樣式,并給隱藏域input賦值
        * 鼠標移入,樣式隨鼠標移動
        * 鼠標移出隘蝎,樣式移除但被鼠標點擊的該元素和之前的元素樣式不變
        * 每次觸發(fā)事件屏鳍,移除所有樣式床佳,并重新獲得樣式
        * */
        var tip_word = ["非常差","差","一般","好","非常好"];
        var stars = $('.stars');
        var Len = stars.length;
        //遍歷每個評分的容器
        for(i=0;i<Len;i++){
            //每次觸發(fā)事件飞袋,清除該項父容器下所有子元素的樣式所有樣式
            function clearAll(obj){
                obj.parent().children('i').removeClass('on');
            }
            stars.eq(i).find('i').click(function(){
                var num = $(this).index();
                clearAll($(this));
                //當前包括前面的元素都加上樣式
                $(this).addClass('on').prevAll('i').addClass('on');
                //給隱藏域input賦值
                $(this).siblings('input').val(num);
                //文字提示
                $(this).siblings('.tip-word').html(tip_word[num-1]);
            });
            stars.eq(i).find('i').mouseover(function(){
                var num = $(this).index();
                clearAll($(this));
                //當前包括前面的元素都加上樣式
                $(this).addClass('on').prevAll('i').addClass('on');
                //文字提示
                $(this).siblings('.tip-word').html(tip_word[num-1]);
            });
            stars.eq(i).find('i').mouseout(function(){
                clearAll($(this));
                //觸發(fā)點擊事件后input有值
                var score = $(this).siblings('input').val();
                //默認最少一個
                if (score == 0)score = 1;
                //文字提示
                $(this).siblings('.tip-word').html(tip_word[score-1]);
                //當前包括前面的元素都加上樣式
                for(i=0;i<score;i++){
                    $(this).parent().find('i').eq(i).addClass('on');
                }
            });
        }
    })
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市怨愤,隨后出現(xiàn)的幾起案子寞缝,更是在濱河造成了極大的恐慌癌压,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荆陆,死亡現(xiàn)場離奇詭異措拇,居然都是意外死亡,警方通過查閱死者的電腦和手機慎宾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門丐吓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人趟据,你說我怎么就攤上這事券犁。” “怎么了汹碱?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵粘衬,是天一觀的道長。 經(jīng)常有香客問我,道長稚新,這世上最難降的妖魔是什么勘伺? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮褂删,結(jié)果婚禮上飞醉,老公的妹妹穿的比我還像新娘。我一直安慰自己屯阀,他們只是感情好适刀,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布西篓。 她就那樣靜靜地躺著庇楞,像睡著了一般丛忆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上盖袭,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天失暂,我揣著相機與錄音,去河邊找鬼鳄虱。 笑死趣席,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的醇蝴。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼想罕,長吁一口氣:“原來是場噩夢啊……” “哼悠栓!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起按价,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤惭适,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后楼镐,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體癞志,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年框产,在試婚紗的時候發(fā)現(xiàn)自己被綠了凄杯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡秉宿,死狀恐怖戒突,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情描睦,我是刑警寧澤膊存,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響隔崎,放射性物質(zhì)發(fā)生泄漏今艺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一爵卒、第九天 我趴在偏房一處隱蔽的房頂上張望虚缎。 院中可真熱鬧,春花似錦技潘、人聲如沸遥巴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽铲掐。三九已至,卻和暖如春值桩,著一層夾襖步出監(jiān)牢的瞬間摆霉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工奔坟, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留携栋,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓咳秉,卻偏偏與公主長得像婉支,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子澜建,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容