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>

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;'"
                + " 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

View Code

 效果图：