jQuery实现星星评分功能
一、这是我做的调查问卷中的一个功能。(第三方MVC框架)
二、功能说明:1、用户点击星星,将值放到隐藏域中。2、用户可以重新点击星星修改回答。
前台JS代码:
<script type="text/javascript"> //鼠标点击 function picClick(obj) { var hid = $(obj).parent().find("input[type=‘hidden‘]"); //赋值 hid.val($(obj).attr("val")); hid.attr("num", $(obj).attr("num")); hid.attr("title", $(obj).attr("title")); } //鼠标移入 function picMouseOver(obj) { $(obj).parent().find("img").attr("src", $(obj).attr("src1")); //全部置灰 //设置高亮图片 var currentNum = $(obj).attr("num"); for (var i = 0; i < currentNum; i++) { $(obj).parent().find("img:eq(" + i + ")").attr("src", $(obj).attr("src2")); } //显示文本 $(obj).parent().find("#spanResult").text($(obj).attr("title")); } //鼠标移出 function picMouseOut(obj) { $(obj).parent().find("img").attr("src", $(obj).attr("src1")); //全部置灰 $(obj).parent().find("#spanResult").text(""); //显示文本 var hid = $(obj).parent().find("input[type=‘hidden‘]"); if (hid.val()) { //设置高亮图片 var currentNum = hid.attr("num"); for (var i = 0; i < currentNum; i++) { $(obj).parent().find("img:eq(" + i + ")").attr("src", $(obj).attr("src2")); } //显示文本 $(obj).parent().find("#spanResult").text(hid.attr("title")); } } </script>
Controller代码:
#region 创建单选图片控件 /// <summary> /// 创建单选图片控件 /// </summary> /// <param name="title">标题</param> /// <param name="list">选项</param> /// <param name="num">题号</param> /// <param name="evaItemId">指标ID</param> /// <param name="picUrl">图片URL</param> /// <param name="edu_EvaluationRecordList">答题集合</param> /// <param name="disabled">是否可编辑</param> public static string CreatePicGroup(string title, List<Edu_CodeValue> list, int num, int evaItemId, string picUrl, List<Edu_EvaluationRecord> edu_EvaluationRecordList, bool disabled) { string[] picUrlArray = picUrl.Split(‘|‘); string pic1 = ""; string pic2 = ""; if (picUrlArray.Length >= 2) { pic1 = picUrlArray[0]; pic2 = picUrlArray[1]; } else if (picUrlArray.Length >= 1) { pic1 = picUrlArray[0]; pic2 = picUrlArray[0]; } else { } StringBuilder sb = new StringBuilder(); sb.Append("<div style=‘margin-top:10px; margin-bottom:30px; margin-left:5px; margin-right:5px;‘>"); sb.Append("<div>" + num.ToString() + "、" + title + "</div>"); string strText = ""; int selIndex = -1; int k = 0; foreach (Edu_CodeValue item in list) { k++; if (edu_EvaluationRecordList != null && edu_EvaluationRecordList.Exists(a => a.OptionId == item.Id && a.EvaItem != null && a.EvaItem.Id == evaItemId)) { selIndex = k; strText = item.Remarks; break; } } sb.Append("<div style=‘margin-top:5px; margin-left:10px;‘>"); int i = 0; foreach (Edu_CodeValue item in list) { i++; string strCheckPic = pic1; if (selIndex != -1 && i <= selIndex) { strCheckPic = pic2; } if (!disabled) { sb.Append("<img num=‘" + i + "‘ alt=‘" + item.Remarks + "‘ title=‘" + item.Remarks + "‘ val=‘" + item.Val + "‘ src=‘" + strCheckPic + "‘ src1=‘" + pic1 + "‘ src2=‘" + pic2 + "‘ style=‘cursor:pointer;‘" + " onclick=‘picClick(this)‘ onmouseover=‘picMouseOver(this)‘ onmouseout=‘picMouseOut(this)‘/>"); } else { sb.Append("<img alt=‘" + item.Val + "‘ src=‘" + strCheckPic + "‘ style=‘margin-left:3px;‘ />"); } } sb.Append("<span id=‘spanResult‘ style=‘margin-left:10px;‘>" + strText + "</span>"); sb.Append("<input name=‘" + evaItemId + "‘ type=‘hidden‘ num=‘‘ title=‘‘ />"); sb.Append("</div>"); sb.Append("</div>"); return sb.ToString(); } #endregion
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。