jquery五颗星评分 求js高手帮我修改下写法。

css样式

/* star */
#star2,
#star1,
#star {
  position: relative;
  width: 600px;
  height: 32px;
  ul,
  span {
    line-height: 23px;
    display: inline;
    float: left;
    height: 23px;
  }
  ul {
    margin: 0 10px;
    padding-left: 10px;
    list-style: none;
  }
  li {
    float: left;
    width: 24px;
    list-style: none;
    cursor: pointer;
    text-indent: -9999px;
    background: url(../img/star.png) no-repeat 0 -23px;
  }
  .on {
    background-position: 0 -48px;
  }
  .on1 {
    background-position: 0 0;
  }
  .on2{
    background-position: 0 -75px;
  }
  strong {
    padding-left: 10px;
    color: #f60;
  }
  p
  {
    position: absolute;
    z-index: 999;
    top: 20px;
    display: none;
    width: 200px;
    height: 100px;
    padding: 20px;
    background: url(../img/icon.gif) no-repeat;
    em
    {
      font-style: normal;
      display: block;
      color: #f60;
    }
  }
}
.star_wrapper
{
  display: inline-block;
  width: 650px;
  margin-top: 20px;
}

function star(name,type){
    var oStar = document.getElementById(name);
    var aLi = oStar.getElementsByTagName("li");
    var oUl = oStar.getElementsByTagName("ul")[0];
    var oSpan = oStar.getElementsByTagName("span")[1];
    var oP = oStar.getElementsByTagName("p")[0];
    var i = iScore = iStar = 0;
    var aMsg = {
        type1: [
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ],
        type2: [
            "很不满意|卖家态度很差，说脏话，简直不把顾客当回事。",
            "不满意|卖家有点不耐烦，承诺的服务也兑现不了；",
            "一般|卖家回复很慢，态度一般，谈不上沟通顺畅;",
            "满意|卖家服务挺好的，沟通挺顺畅的，总体满意；",
            "非常满意|卖家的服务太棒了，考虑非常周到，完全超出期望值;"
        ],
        type3: [
            "很不满意|物流公司态度还好吧，送货速度挺快的；",
            "不满意|物流公司态度还好吧，送货速度挺快的；",
            "一般|物流公司服务态度一般，运送速度一般；",
            "满意|物流公司服务态度挺差，运送速度太慢；",
            "非常满意|物流公司态度非常差，送货慢，外包装有破损。 "
        ]
    };
    for (i = 1; i <= aLi.length; i++){
        aLi[i - 1].index = i;
        //鼠标移过显示分数
        aLi[i - 1].onmouseover = function (){
            fnPoint(this.index);
            //浮动层显示
            oP.style.display = "block";
            //计算浮动层位置
            oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
            //匹配浮动层文字内容
            oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg["type"+type][this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg["type"+type][this.index - 1].match(/\|(.+)/)[1]
        };
        //鼠标离开后恢复上次评分
        aLi[i - 1].onmouseout = function (){
            fnPoint();
            //关闭浮动层
            oP.style.display = "none"
        };
        //点击后进行评分处理
        aLi[i - 1].onclick = function (){
            iStar = this.index;
            oP.style.display = "none";
            oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg["type"+type][this.index - 1].match(/\|(.+)/)[1] + ")"
        }
    }
    //评分处理
    function fnPoint(iArg){
        //分数赋值
        iScore = iArg || iStar;
        for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
    }

};
star("star",1);
star("star1",2);
star("star2",3);

我希望这个ul>li列表加一点东西
比如 li class="on" 改为li class="on1" 这样可以改变灰色的
第五个li class="on"改为li class="on2" 可以显示红色。
我用背景定位的。
求高手帮我改下js 。