jQuery实现星星评分功能

一、这是我做的调查问卷中的一个功能。（第三方MVC框架）

二、功能说明：1、用户点击星星，将值放到隐藏域中。2、用户可以重新点击星星修改回答。

前台JS代码：

View Code

Controller代码：

#region 创建单选图片控件
/// 

/// 创建单选图片控件
/// 
/// 标题
/// 选项
/// 题号
/// 指标ID
/// 图片URL
/// 答题集合
/// 是否可编辑
public static string CreatePicGroup(string title, List list, int num, int evaItemId, string picUrl, List 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("
");
    sb.Append("
" + num.ToString() + "、" + title + "");

    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("
");
    int i = 0;
    foreach (Edu_CodeValue item in list)
    {
        i++;

        string strCheckPic = pic1;
        if (selIndex != -1 && i <= selIndex)
        {
            strCheckPic = pic2;
        }

        if (!disabled)
        {
            sb.Append(""
                + " οnclick='picClick(this)' οnmοuseοver='picMouseOver(this)' οnmοuseοut='picMouseOut(this)'/>");
        }
        else
        {
            sb.Append("");
        }
    }
    sb.Append("" + strText + "");
    sb.Append("");
    sb.Append("");

    sb.Append("");

    return sb.ToString();
}
#endregion

View Code

 效果图：

 

转载于:https://www.cnblogs.com/s0611163/p/3588700.html