jQuery 實現(xiàn)評論等級好評差評特效
更新時間：2016年05月06日 11:14:58 作者：小樣編碼
本文主要介紹如何實現(xiàn)類似淘寶好評差評的效果，需要的小伙伴直接拿去用吧。
實現(xiàn)評分等級，就類似于淘寶的好評差評特效，點擊不同的等級圖標(biāo)顯示相應(yīng)的文字，先來看下效果。
看完效果后估計大家都明白我要說的是什么了吧，下面小編就帶大家看下代碼
復(fù)制代碼 代碼如下:
<style>
.maxdiv div{
height:10px;
width:20px;
border:1px solid #000;
float:left;
margin:20px 2px 0px 5px;
}
</style>
復(fù)制代碼 代碼如下:
<div class="maxdiv">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<span></span>
最后大家看下JS 上邊小編已經(jīng)把注釋都注上了，其實也不難，主要是加深理解..
復(fù)制代碼 代碼如下:
$(function(){
$(".maxdiv div").bind("hover",function(){
$(this).attr("style","background:red");//當(dāng)前div加上style="background:red";
$("div:last").prevAll().attr("style","background:red");//給所有的都加上樣式;
$(this).nextAll().attr("style","");//當(dāng)前div后的所有所有樣式都為"";
var dsize=$("div [style ='background:red']").size();//獲得所有背景含有style="background:red"的個數(shù);
if(dsize==1)
{
$('span').text("很差");
}
else if(dsize==2)
{
$('span').text("差");
}
else if(dsize==3)
{
$('span').text("一般");
}
else if(dsize==4)
{
$('span').text("好");
}
else if(dsize==5)
{
$('span').text("很好");
}
});
});
個人能力有限，做的不是太美觀，有需要的朋友可以拿去再美化一下，呵呵。
相關(guān)文章
JavaScript 也可以利用模版來解決這些問題，比如基于 jQuery 的 jquery.tmpl，現(xiàn)在已經(jīng)被接受為官方的模版插件了。詳細的 API 在 jQuery 的 Templates 里，內(nèi)置的 demo 也盡情地演示了各種用法。2015-04-04
jQuery 是繼 prototype 之后又一個優(yōu)秀的 Javascript 框架。其宗旨是—寫更少的代碼,做更多的事情。它是輕量級的 js 庫(壓縮后只有21k) ，這是其它的 js 庫所不及 的，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。2008-06-06
這篇文章主要介紹了jQuery檢測鼠標(biāo)左鍵和右鍵點擊的方法,涉及jQuery操作鼠標(biāo)事件的技巧,且針對IE瀏覽器具備良好的兼容性,需要的朋友可以參考下2015-03-03
jQuery Trim去除字符串首尾空字符的實現(xiàn)方法說明
本篇文章主要是對jQuery Trim去除字符串首尾空字符的實現(xiàn)方法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
BootStrap網(wǎng)頁中代碼顯示<code><pre>用法詳解
網(wǎng)頁中代碼的顯示，包括行中代碼顯示；成段的代碼顯示.本文給大家介紹bootstrap網(wǎng)頁中代碼顯示<code><pre>用法詳解，感興趣的朋友一起看看吧2016-10-10
下面小編就為大家?guī)硪黄猨Query實現(xiàn)選中行變色效果(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
jQuery實現(xiàn)注冊會員時密碼強度提示信息功能示例
這篇文章主要介紹了jQuery實現(xiàn)注冊會員時密碼強度提示信息功能,涉及jQuery事件響應(yīng)及字符串的遍歷、運算與判斷等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
jquery創(chuàng)建并行對象或者合并對象的實現(xiàn)代碼
如果有對象A ，B 現(xiàn)在我想要合并成對象C 從C里面可以找到A , B 及其子對象 怎么做2012-10-10
JQuery form表單提交前驗證單選框是否選中、刪除記錄時驗證經(jīng)驗總結(jié)(整理)
這篇文章主要介紹了JQuery form表單提交前驗證單選框是否選中、刪除記錄時驗證經(jīng)驗總結(jié)，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-06-06
圖片展示想必大家都見到過吧，下面有個不錯的例子，通俗易懂，使用jquery實現(xiàn)的，感興趣的朋友不要錯過2013-11-11