星级评分

来源：互联网发布：代理设计模式 java 编辑：程序博客网时间：2024/04/29 01:18

星级评分

1、html页面：

--start

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>jQuery简单星级评价打分代码</title>

<link rel="stylesheet" href="css/mytyle.css" />

<style type="text/css">

*{

margin: 0;

}

.box{

width: 80%;

margin:20px auto;

}

.list{

margin: 0 50px;

width: 30%;

float: left;

}

a{

font-size: 50px;

text-decoration: none;

color: lightgray;

}

span{

font-size: 40px;

padding-top: 10px;

margin-left: 50px;

}

.c1{

color: crimson;

}

.c2{

color: goldenrod;

}

.c3{

color: yellow;

}

.c4{

color: orange;

}

.c5{

color: limegreen;

}

</style>

<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

<script type="text/javascript" src="js/my.js" ></script>

</head>

<body>

<div class="box">

<div class="list">

<a href="#" class="star1">★</a>

<a href="#" class="star2">★</a>

<a href="#" class="star3">★</a>

<a href="#" class="star4">★</a>

<a href="#" class="star5">★</a>

</div>

<span class="remark">亲，请客观给出评价~</span>

</div>

<div style="text-align:center;">

<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>

</div>

</body>

</html>

--end

2、js 文件：

--start

$(function(){

starChange();

});

function starChange(){

for (var i=1; i<=5; i++) {

//为每个星星 绑定鼠标移入 移出 事件

$(".star"+ i).hover(

//鼠标移入

function(){

var index = $(this).attr("class").substr(4,1);

for (var i= index; i>0; i--) {

$(".star"+ i).addClass("c" + index);

}

//改变评价样式 及 内容

switch(index){

case "1":

$(".remark").addClass("c1").text("垃圾！简直就是垃圾！！！");

break;

case "2":

$(".remark").addClass("c2").text("糟糕透了！！");

break;

case "3":

$(".remark").addClass("c3").text("这种东西还好意识拿出来卖？！");

break;

case "4":

$(".remark").addClass("c4").text("不错，还可以~");

break;

case "5":

$(".remark").addClass("c5").text("Good~一次愉快的购物体验~");

break;

}

},

//鼠标移出

function(){

var index = $(this).attr("class").substr(4,1);

for (var i= index; i>0; i--) {

//恢复本身及之前的星星的颜色

$(".star"+ i).removeClass("c" + index);

}

//回复 评价

$(".remark").removeClass("c" + index).text("亲，请客观给出评价~");

}

);

//为每个星星 绑定点击事件

$(".star"+ i).bind("click", function(){

var index = $(this).attr("class").substr(4,1);

/**解绑鼠标移出移入事件

*取消绑定的hover事件的正确方式：

*$('a').unbind('mouseenter').unbind('mouseleave');

*/

//点击之后 解绑本身及之前星星的 所有事件

for(var i=1; i<=index; i++){

$(".star"+ i).unbind();

}

//将后面的隐藏

while(++index <= 5){

$(".star"+ index).css("display","none");

}

});

}

}

--end

0 0