81,122
社区成员
发帖
与我相关
我的任务
分享星级评分如何实现多行
网上的效果只有一行，我写了一个方法传值给xingxing1有了4行的效果，但是鼠标离开后恢复上次评分时却总是回复的上一行的评分，为什么呢
// js星级评分特效************
function xingxing(){
var aAll = document.getElementById("xingxing").getElementsByTagName("div"); // 获取对象下面所有的div节点
var oStar=null;
for ( var j= 0; j< aAll.length; j++) {
oStar = aAll[j];
xingxing1(oStar);
}
}
function xingxing1(oStar) {
goTopEx();
// getFenLei();
//var oStar=document.getElementById("star");
var aLi = oStar.getElementsByTagName("li");
var oUl = oStar.getElementsByTagName("ul")[0];
var oSpan = oStar.getElementsByTagName("span")[1];
var oP = oStar.getElementsByTagName("p")[0];
var i = iScore = iStar = 0;
var aMsg = [ "很不好", "不好", "一般", "好", "非常好" ]
for (i = 1; i <= aLi.length; i++) {
aLi[i - 1].index = i;
// 鼠标移过显示分数
aLi[i - 1].onmouseover = function() {
fnPoint(this.index);
// 浮动层显示
oP.style.display = "block";
// 计算浮动层位置
oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth
- 104 + "px";
// 匹配浮动层文字内容
oP.innerHTML = "<em><b>" + this.index + "</b> 分 "
+ aMsg[this.index - 1].match(/(.+)/)[1] + "</em>";
};
// 鼠标离开后恢复上次评分
aLi[i - 1].onmouseout = function() {
fnPoint();
// 关闭浮动层
oP.style.display = "none";
};
// 点击后进行评分处理
aLi[i - 1].onclick = function() {
iStar = this.index;
oP.style.display = "none";
oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> ("
+ aMsg[this.index - 1].match(/(.+)/)[1] + ")";
}
}
// 评分处理
function fnPoint(iArg) {
// 分数赋值
iScore = iArg || iStar;
for (i = 0; i < aLi.length; i++){
aLi[i].className = i < iScore ? "on" : "";
}
}
}
// js星级评分特效end************
// js星级评分特效************
function xingxing(){
var aAll = document.getElementById("xingxing").getElementsByTagName("div"); // 获取对象下面所有的div节点
var oStar=null;
for ( var j= 0; j< aAll.length; j++) {
oStar = aAll[j];
xingxing1(oStar);
}
}
function xingxing1(oStar) {
goTopEx();
// getFenLei();
//var oStar=document.getElementById("star");
var aLi = oStar.getElementsByTagName("li");
var oUl = oStar.getElementsByTagName("ul")[0];
var oSpan = oStar.getElementsByTagName("span")[1];
var oP = oStar.getElementsByTagName("p")[0];
var i = iScore = iStar = 0;
var aMsg = [ "很不好", "不好", "一般", "好", "非常好" ]
for (i = 1; i <= aLi.length; i++) {
aLi[i - 1].index = i;
// 鼠标移过显示分数
aLi[i - 1].onmouseover = function() {
fnPoint(this.index);
// 浮动层显示
oP.style.display = "block";
// 计算浮动层位置
oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth
- 104 + "px";
// 匹配浮动层文字内容
oP.innerHTML = "<em><b>" + this.index + "</b> 分 "
+ aMsg[this.index - 1].match(/(.+)/)[1] + "</em>";
};
// 鼠标离开后恢复上次评分
aLi[i - 1].onmouseout = function() {
fnPoint();
// 关闭浮动层
oP.style.display = "none";
};
// 点击后进行评分处理
aLi[i - 1].onclick = function() {
iStar = this.index;
oP.style.display = "none";
oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> ("
+ aMsg[this.index - 1].match(/(.+)/)[1] + ")";
}
}
// 评分处理
function fnPoint(iArg) {
// 分数赋值
iScore = iArg || iStar;
for (i = 0; i < aLi.length; i++){
aLi[i].className = i < iScore ? "on" : "";
}
}
}
// js星级评分特效end************
...全文
请发表友善的回复…
发表回复
u010771268 2013-08-12
- 打赏
- 举报
找到了一个jquery做的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现星级评分效果 - heluyao's Blog-download by http://www.jb51.net</title>
<style type="text/css">
* { margin:0; padding:0;}
ul { list-style:none;}
body { font-size:12px; line-height:18px; color:#404040; text-align:center;}
.clearfix:after {
display:block;
clear:both;
height:0;
font-size:0;
content:"."; color:#fff;
}
.clearfix { min-height:1%; clear:both;}
*html .clearfix { height:1%;}
h1 { line-height:30px; font-size:14px; text-align:center; margin:50px auto 0; width:800px; color:#404040;}
.info { margin-bottom:20px; color:#999;}
.right {width:540px; text-align:right; margin:10px auto 0 auto;}
.tips { line-height:24px; margin:10px auto 0 auto; width:530px; border:1px solid #dcdddd; background-color:#fffceb; padding:5px; color:#666;}
/* 星级评分css */
.selectStar { width:500px; margin:0 auto; border:1px solid #ddd; padding:20px;}
.selectStar li { float:left; text-align:left; _display:inline; margin-right:8px; padding:0 5px; line-height:20px;}
.selectStar li span.red { color:#d00; width:10px;}
.selectStar li span.zi {}
.selectStar li em { border:3px solid #f6b88e; height:24px; width:75px; display:block; background:url(dpForm_1_0_0.gif) no-repeat 8px 6px; padding:0 8px;}
.selectStar li em.selectS1 { background-position:8px -14px;}
.selectStar li em.selectS2 { background-position:8px -34px;}
.selectStar li em.selectS3 { background-position:8px -54px;}
.selectStar li em.selectS4 { background-position:8px -74px;}
.selectStar li em.selectS5 { background-position:8px -94px;}
.selectStar li em a { text-indent:-999em; overflow:hidden; display:block; float:left; width:14px;}
.dpCont { color:#f60;}
</style>
</head>
<body>
<h1>基于jQuery实现星级评分效果</h1>
<p class="info"><a href="http://www.11gz.com/" title="heluyao's Blog">heluyao's Blog</a></p>
<div class="selectStar clearfix">
<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>
<input id="dpStar1Hide" type="hidden" value="" />
<li><span class="red">*</span><span class="zi">质量 </span><span id="dpCont2" class="dpCont"></span>
<em id="dpStar2" 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>
<li><span class="red">*</span><span class="zi">性价比 </span><span id="dpCont3" class="dpCont"></span>
<em id="dpStar3" 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>
<div class="tips">本代码性能方面仍有一定提升空间，只是闲来无聊练手之作。</div>
<div class="right"><a href="javascript:window.history.back(-1); ">返回上一页 »</a></div>
<script src="jquery-1.1.3.pack.js" type="text/javascript"></script>
<script type="text/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);
});
});
</script>
<p> </p>
<table width="728" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="136" align="center"><p>代码整理：<a href="http://www.jb51.net/" target="_blank">脚本之家</a> </p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p><p>脚本之家整理。</p></p>
<p><script src="/js/js-preview-728x90.js"></script><br /><br /><br /><center><script src="/js/tj.js"></script></center></p></td>
</tr>
</table>
</body>
</html>
u010771268 2013-08-12
- 打赏
- 举报
<!-- 星级评分特效 -->
<div id="xingxing">
<div id="star" class="star">
<span>总体评价：</span>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
<span></span>
<p></p>
</div>
<div id="star1" class="star">
<span>1级评价：</span>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
<span></span>
<p></p>
</div>
.................................
失落夏天 2013-08-12
- 打赏
- 举报
评星级以前我做过一个JS的特效，应该就是你想要的。。先mark下。。
下班回家后再发你。
u010771268 2013-08-12
- 打赏
- 举报
用隐藏表单存值，问题就解决了
var score=oStar.getElementsByTagName("input")[0].value=0;
.................
// 点击后进行评分处理
aLi[i - 1].onclick = function() {
//iStar = this.index;
oP.style.display = "none";
oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> ("
+ aMsg[this.index - 1].match(/(.+)/)[1] + ")";
score=this.index;//给隐藏表单赋值
}
}
// 评分处理
function fnPoint(iArg) {
// 分数赋值
iScore = iArg||score;
for (var i = 0; i < aLi.length; i++){
........
<div id="star" class="star" style="border-bottom: 3px solid pink;height: 50px;line-height: 50px;width: 60%; ">
<span style="color: red;">*总体评价：</span>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
<input id="scoreHide" type="hidden" value="" />
<span></span>
<p></p>
</div>
