基于jQuery实现星级评分效果 | Heluyao's Blog

博客 - JS/Ajax/AS

基于jQuery实现星级评分效果

仿照『口碑』的评星级效果做的一点小东西，测试下自己这段时间的学习成果···

看图知效果：

星级评分

预览效果：星级评分

下载文件：star-Level.rar

口碑的代码：starLevel-koubei.rar[提取自口碑网]

html

<div class="selectStar">
<ul class="clearfix">
<li>
<span class="red">*</span>
<span class="zi">服务　　</span>
<span id="dpCont1" class="dpCont"></span>
<em id="dpStar1" class="">
<a href="#" id="1">1</a>
<a href="#" id="2">2</a>
<a href="#" id="3">3</a>
<a href="#" id="4">4</a>
<a href="#" id="5">5</a>
</em>
</li>
</ul>
</div>

javascript:

$(function(){
var className;
var classID;
var dpText="";
var dpTextC="";
$(".selectStar em a").bind("click",function(){
className = "selectS" + $(this).attr("id");
classID = $(this).parent().attr("id");
$(this).parent().removeClass().addClass(className);
if($(this).attr("id") == 1 || $(this).attr("id") == 2) {dpTextC = "差评";}
if($(this).attr("id") == 3 || $(this).attr("id") == 4) {dpTextC = "中评";}
if($(this).attr("id") == 5) {dpTextC = "好评";}
$(this).parent().prev(".dpCont").text(dpTextC);
return false;
})
.bind("mouseover",function(){
if($(this).attr("id") == 1 || $(this).attr("id") == 2) {dpText = "差评";}
if($(this).attr("id") == 3 || $(this).attr("id") == 4) {dpText = "中评";}
if($(this).attr("id") == 5) {dpText = "好评";}
$(this).parent().removeClass().addClass("selectS" + $(this).attr("id"));
$(this).parent().prev(".dpCont").text(dpText);
})
.bind("mouseout",function(){
$(this).parent().removeClass("selectS" + $(this).attr("id"));
if($(this).parent().attr("id") == classID){
$(this).parent().addClass(className);
}
$(this).parent().prev(".dpCont").text(dpTextC);
});
});

相关文章

标签：JQuery

这篇文章发表于2009年10月13日，下午，4:03，归类于JS/Ajax/AS。您可以通过订阅RSS 2.0跟踪对这篇文章的评论，也可以发表您的评论，或者从您的站点trackback。

10 条评论发表在“基于jQuery实现星级评分效果”上

Fusdwets 2009年12月14日上午 7:19 说：
hmm… interesting thoughts.

[回复]
Nanjim 2010年04月1日下午 3:45 说：
怎么用？

[回复]
lei 2010年06月20日上午 10:16 说：

我想在 123.php页面获取用户评分值，存入是数据库。我该如何获取评分值呢？？？？

[回复]
heluyao 2010年06月21日上午 10:14 说：
你可以弄个隐藏域，当评级状态改变的时候随之改变。
然后php获取这个隐藏域的值，就很简单了

[回复]
1111111 2010年07月26日下午 7:28 说：
有一个问题
我在asp.net项目中只有第一个框框有效
多个后面的都无效~~

[回复]
heluyao 2010年07月26日下午 11:10 说：
注意下代码中的ID，ID是不能重复的。dpCont1、dpStar1。

[回复]
hi 2010年08月1日上午 11:14 说：
有个问题，点击后，鼠标再去划过选项。
除了最后次点击的选中外，其他的都清空了。评论语也显示为最后次点击的评论语。
该如何解决？

[回复]
heluyao 2010年08月1日下午 12:27 说：
才发现这个问题，你自己先找解决的办法吧！我暂时抽不出时间来。

[回复]
酷库免费icon图标 2011年03月20日下午 7:07 说：
能不能让一个评论者只评论一次？能的话就用了？我想拿去直接使用~

[回复]
heluyao 2011年03月21日下午 1:21 说：
这个需要后端的支持！

[回复]

写下您的看法