jquery实现用户打分评分特效
js代码：
<scripttype="text/javascript">
$(function(){
//简洁用户评分代码
$(".pfxtFenli").click(function(){
$(this).addClass("pfxtCur");
$(this).prevAll().addClass("pfxtCur");
$(this).nextAll().removeClass("pfxtCur");
});
$(".pfxtFenli").dblclick(function(){
$(".pfxtFenli").removeClass("pfxtCur");
});
})
</script>
CSS
<styletype="text/css">
*{margin:0;padding:0;font-family:"微软雅黑"}
ul{list-style:none;}
/*用户评分*/
.pingfenxitong{
padding:15px0;
width:500px;
margin:0auto;
}
.pingfenList{
float:left;
width:500px;
padding-right:20px;
}
.pfxtTitle{
font-weight:bold;
font-size:1.2em;
padding:4px0;
}
.pfxtText{
line-height:25px;
}
.pfxtFen{
margin:10px0;
}
.pfxtFenli{
float:left;
width:98px;
height:30px;
text-align:center;
line-height:30px;
border:#ddd1pxsolid;
background:#f1f1f1;
cursor:pointer;
}
.pfxtFenli.pfxtCur{
background:#308A95;
color:#fff;
border:#308A951pxsolid;
}
</style>
HTML
<divclass="pingfenxitong"> <divclass="pingfenList"> <divclass="pfxtTitle">功能：</div> <divclass="pfxtText">你觉得这个创意在功能上优秀吗？</div> <ulclass="pfxtFen"title="双击取消评分"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <divclass="clearfix"></div> </ul> <divclass="pfxtRight"></div> <divclass="clearfix"></div> </div> <divclass="pingfenList"> <divclass="pfxtTitle">外观：</div> <divclass="pfxtText">你觉得这个创意在外观上优秀吗？</div> <ulclass="pfxtFen"title="双击取消评分"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <divclass="clearfix"></div> </ul> <divclass="pfxtRight"></div> <divclass="clearfix"></div> </div> <divclass="pingfenList"> <divclass="pfxtTitle">成本：</div> <divclass="pfxtText">你觉得这个创意在成本上优秀吗？</div> <ulclass="pfxtFen"title="双击取消评分"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <divclass="clearfix"></div> </ul> <divclass="pfxtRight"></div> <divclass="clearfix"></div> </div> <divclass="pingfenList"> <divclass="pfxtTitle">难度：</div> <divclass="pfxtText">你觉得这个创意在难度上可行吗？</div> <ulclass="pfxtFen"title="双击取消评分"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <divclass="clearfix"></div> </ul> <divclass="pfxtRight"></div> <divclass="clearfix"></div> </div> <divclass="clearfix"></div> </div>
以上所述就是本文的全部内容了，希望大家能够喜欢。