一、這是我做的調查問卷中的一個功能。（第三方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> View Code

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;'"+ " οnclick='picClick(this)' οnmοuseοver='picMouseOver(this)' οnmοuseοut='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 View Code

?效果圖：

?

轉載于:https://www.cnblogs.com/s0611163/p/3588700.html

總結

以上是生活随笔為你收集整理的jQuery实现星星评分功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。