Javascript 如何将星级设置为默认值5，并在选择后更改

这里默认为0。但我想在默认情况下选择5星，然后我应该能够改变。 我试图使rateValue=5，但没有成功。有人能帮忙吗

$（文档）.ready（函数（）{
/*1.在悬停状态下可视化事物-点击操作见下一部分*/
$（'#stars li'）。on（'mouseover'，function（）{
var onStar=parseInt（$（this）.data（'value'），10）；//当前鼠标所在的星型
//现在高亮显示所有不在当前悬停星星后面的星星
$（this）.parent（）.children（'li.star'）。每个（函数（e）{
如果（e1）{
msg=“谢谢！您将此评级为“+评级值+”星级。”；
}
否则{
msg=“我们将提高自己。您将此评级为“+评级值+”星级。”；
}
响应消息（msg）；
});
});
功能响应消息（msg）{
$（“.success box”）.fadeIn（200）；
$（'.success box div.text-message'）.html（“+msg+”）；
}

正文{
字体系列：“开放式Sans”、Helvetica、Arial、Sans serif；
颜色：#555；
最大宽度：680px；
保证金：0自动；
填充：0 20px；
}
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
*：之前，*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.clearfix{
明确：两者皆有；
}
.text居中{文本对齐：居中；}
a{
颜色：番茄；
文字装饰：无；
}
a:悬停{
颜色：#2196f3；
}
前{
显示：块；
填充：9.5px；
利润率：0.10px；
字体大小：13px；
线高：1.42857143；
颜色：#333；
单词break：打破一切；
单词包装：打断单词；
背景色：#F5；
边框：1px实心#CCC；
边界半径：4px；
}
.标题{
填充：20px0；
位置：相对位置；
边缘底部：10px；
}
.标题：之后{
内容：“；
显示：块；
高度：1px；
背景：#eee；
位置：绝对位置；
左：30%；右：30%；
}
.标题h2{
字号：3em；
字体大小：300；
边缘底部：0.2米；
}
.标题p{
字体大小：14px；
}
#a脚{
利润率：20px0；
}
.新版本{
填充：20px 20px；
边框：1px实心#eee；
边界半径：20px；
盒影：0 2px12px 0 rgba（0,0,0,0.1）；
文本对齐：居中；
字体大小：14px；
线高：1.7；
}
.新react版本.react svg徽标{
文本对齐：居中；
最大宽度：60px；
保证金：20px自动；
边际上限：0；
}
.成功箱{
利润率：50px0；
填充：10px 10px；
边框：1px实心#eee；
背景#f9f9f9；
}
.success box img{
右边距：10px；
显示：内联块；
垂直对齐：顶部；
}
.success box>div{
垂直对齐：顶部；
显示：内联块；
颜色：#888；
}
/*星级小部件风格*/
.ul评级之星{
列表样式类型：无；
填充：0；
-moz用户选择：无；
-webkit用户选择：无；
}
.评级星ul>li.star{
显示：内联块；
}
/*恒星的空闲状态*/
.评级星级ul>li.star>i.fa{
字体大小：2.5em；/*更改星星的大小*/
颜色：#ccc；/*空闲状态下的颜色*/
}
/*恒星的悬停状态*/
.评级星ul>li.star.hover>i.fa{
颜色：#FFCC36；
}
/*恒星的选定状态*/
.评级星级ul>li.star.selected>i.fa{
颜色：#FF912C；
}

评级小部件
一个带有jQuery和FontAwesome图标的简单星级小部件

只要在JQuery重新加载/添加类时，以HTML格式添加该类即可

$（文档）.ready（函数（）{
/*1.在悬停状态下可视化事物-点击操作见下一部分*/
$（'#stars li'）。on（'mouseover'，function（）{
var onStar=parseInt（$（this）.data（'value'），10）；//当前鼠标所在的星型
//现在高亮显示所有不在当前悬停星星后面的星星
$（this）.parent（）.children（'li.star'）。每个（函数（e）{
如果（e1）{
msg=“谢谢！您将此评级为“+评级值+”星级。”；
}
<ul id='stars'>
      <li class='star selected' title='Poor' data-value='1'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star selected' title='Fair' data-value='2'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star selected' title='Good' data-value='3'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star selected' title='Excellent' data-value='4'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star selected' title='WOW!!!' data-value='5'>
        <i class='fa fa-star fa-fw'></i>
      </li>
    </ul>