一、这是我做的调查问卷中的一个功能。(第三方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实现星星评分功能相关推荐

  1. JS实现星星评分功能实例代码(两种方法)

    转载自   JS实现星星评分功能实例代码(两种方法) 一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"&g ...

  2. php星星评价,JS 实现点亮星星评分功能

    本文主要和大家分享JS 实现点亮星星评分功能,希望能帮助到大家. 点亮星星评分 ★ ★ ★ ★ ★ 相关推荐:

  3. Bootstrap图标实现移动端的星星评分功能

    利用Bootstrap图标实现星星评分功能: <html lang="zh-cn"> <head><meta http-equiv="Con ...

  4. 原生jquery实现星级评分功能,鼠标滑过点亮星星

    背景:首先,这个功能是很常见的一个效果,无论是PC端还是移动端,评分和反馈都屡见不鲜,但是大多数实现都是直接引用组件库里的组件来实现的,而我今天要给大家分享的是通过原生js自己手写实现的同样效果,针对 ...

  5. jquery实现星星闪烁功能

    实现星星闪烁功能,其实很简单,来看一下完整的代码实现吧! <style>*{margin:0;padding:0;}#box{width:700px;height:700px;backgr ...

  6. 从实战学习微信小程序-电商星星评分功能(五)

    现在,大多数电商系统都是通过五颗星星来进行商品评分的,所以我们要准备两种图片:实心星星和空心星星(如果你想要半星评价也可以加上一个半实星星,实现原理一样) 源码链接下载:https://downloa ...

  7. Angular 父子组件之间的通讯,自定义组件实现星星评分功能

    Angular组件父子间通讯方法: OnInit(), Input() 通过输入属性和输出属性,通过EventEmitter 向父组件发射改变值 示例一个星星打分的组件: 组件描述:1.根据分数值显示 ...

  8. java实现星级评分功能_JS实现星星评分功能实例代码(两种方法)

    一.方法1 1.用到图片 2.结构和样式 Document ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-st ...

  9. html的星星评分效果,利用jQuery实现星星打分评分插件

    特效描述:利用jQuery实现 星星打分 评分插件.利用jQuery实现星星打分评分插件 代码结构 1. 引入JS 2. HTML代码 $("#star_grade").marki ...

最新文章

  1. SqlDataAdapter上调用存储过程
  2. quartus 修改 时钟_Clock Quartus II 开发的多功能数字时钟,有计时、调 闹铃、警报等 Other systems 其他 274万源代码下载- www.pudn.com...
  3. boost::mpl模块实现reverse相关的测试程序
  4. 计算机类会议论文2021截稿,科学网—人工智能 | 国际会议截稿信息3条 - 李昕的博文...
  5. 计算机软件选修课选什么好,大学值得选的“选修课”,一点不比专业课差,能选上最好认真听...
  6. ZFS 常见问题解答 及 ZFS Boot 问题探讨
  7. 如何关闭默认浏览器检查
  8. .net中C#代码与javaScript函数的相互调用问题
  9. 你应该了解的python 垃圾回收机制
  10. 如何激活 Trend Micro Deep Security Agent
  11. springboot集成quzytz(简单易使用复制即可)
  12. 声艺fx16调音台怎么样_声艺FX16II 声艺(Soundcraft) FX16ii 调音台
  13. 家用linux 版本哪个好,Ubuntu到底哪个版本最好用?
  14. ILSVRC2015_VID数据集说明
  15. 每日学习(Git和Github)
  16. 肇庆七星岩星湖 情迷湿地公园
  17. MongoDB报错,Sort operation used more than the maximum 33554432 bytes of RAM.Add an index
  18. Vue关键词搜索高亮
  19. 爬虫爬取煎蛋网美女图片
  20. 华硕fl5600l重装系统

热门文章

  1. VTK:PolyData之ContoursToSurface
  2. C语言数组的深入理解
  3. STL的tuple集合对象
  4. QT的QDesignerContainerExtension类的使用
  5. c++静态成员变量成员函数
  6. android中setdate不是静态,为什么当setData()和setType()不起作用时,android intent的setDataAndType()工作正常?...
  7. linux du -h按文件大小,【玩转linux命令】du党
  8. 2.关于QT中数据库操作,简单数据库连接操作,数据库的增删改查,QSqlTableModel和QTableView,事务操作,关于QItemDelegate 代理
  9. WebService入门篇
  10. Linux sed 写命令常见使用案例