JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Js仿淘宝星级评分</h1>
     <ul class="star" id="star">
         <p></p>
         <li id="L1">
             <label>宝贝与描述A</label>
             <span>1分</span>
             <span>2分</span>
             <span>3分</span>
             <span>4分</span>
             <span>5分</span>
             <strong></strong>
             <strong class="s"></strong>
         </li>
         <li id="L2">
             <label>宝贝与描述B</label>
             <span>1分</span>
             <span>2分</span>
             <span>3分</span>
             <span>4分</span>
             <span>5分</span>
             <strong></strong>
             <strong class="s"></strong>
         </li>
         <li id="L3">
             <label>宝贝与描述C</label>
             <span>1分</span>
             <span>2分</span>
             <span>3分</span>
             <span>4分</span>
             <span>5分</span>
             <strong></strong>
             <strong class="s"></strong>
         </li>           
     </ul>

CSS

*{margin:0;padding:0;}
 body{color:#666;font:12px/1.5 Arial;}
 h1{font-size: 18px;}
 ul.star {position:relative;list-style-type:none;}
 ul.star li{height: 24px;clear: both;}
 ul.star li label, ul.star li span, ul.star li strong{display: block;float:left;}
 ul.star li label{margin-right: 5px;}
 ul.star li strong{margin-left: 5px;}
 ul.star li span{width:24px;background:url(http://www.codefans.net/jscss/demoimg/201206/star.png) no-repeat;text-indent: -9999px;cursor: pointer;}
 ul.star li span.active{background-position:0 -28px;}
 ul.star li strong{color:#f60;font-size: 14px;}
 ul.star li strong.s{color:#666;font-size: 12px;font-weight: normal;}
 ul.star p{position:absolute;padding:2px 5px;display:none;background-color: #fff;border: 2px orange solid;z-index: 99;}
 ul.star p em{color:#f60;font-style:normal;font-weight: bold;}

JavaScript

star("L1", ["很不满意0|差得太离谱，与卖家描述的严重不符，非常不满", "不满意0|部分有破损，与卖家描述的不符，不满意", "一般0|质量一般，没有卖家描述的那么好", "满意0|质量不错，与卖家描述的基本一致，还是挺满意的", "非常满意0|质量非常好，与卖家描述的完全一致，非常满意"])
 star("L2", ["很不满意1|差得太离谱，与卖家描述的严重不符，非常不满", "不满意1|部分有破损，与卖家描述的不符，不满意", "一般1|质量一般，没有卖家描述的那么好", "满意1|质量不错，与卖家描述的基本一致，还是挺满意的", "非常满意1|质量非常好，与卖家描述的完全一致，非常满意"])
 star("L3", ["很不满意2|差得太离谱，与卖家描述的严重不符，非常不满", "不满意2|部分有破损，与卖家描述的不符，不满意", "一般2|质量一般，没有卖家描述的那么好", "满意2|质量不错，与卖家描述的基本一致，还是挺满意的", "非常满意2|质量非常好，与卖家描述的完全一致，非常满意"])
 
 function star(id, aMsg){    //aMsg为数组描述
     var star = document.getElementById("star"),
         li = document.getElementById(id),
         spans = li.getElementsByTagName("span"),
         p = star.getElementsByTagName("p")[0],
         strong1 = li.getElementsByTagName("strong")[0],
         strong2 = li.getElementsByTagName("strong")[1];
     var iStar;
 
     for(var i=0; i<spans.length; i++){
 
         //给每个span加一个index
         spans[i].index = i+1; 
 
         //鼠标移动上添加active
         spans[i].onmouseover = function(){
             onStar(this.index);
             p.innerHTML = "<em>" + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em><br />" + aMsg[this.index - 1].match(/\|(.+)/)[1];
             p.style.display = "block";
             p.style.top = (getPosition(this).top-5) + "px";
             p.style.left = getPosition(this).left + "px";
         };
 
         //鼠标移出删除acitve
         spans[i].onmouseout = function(){
             onStar();
             
             p.style.display = "";
         };
 
         //鼠标点击后进行评分处理
         spans[i].onclick = function(){
             iStar = this.index;
             strong1.innerHTML = this.innerHTML;
             strong2.innerHTML = "("+ aMsg[this.index - 1].match(/\|(.+)/)[1] +")";
         };
 
     };
 
 
     //当前访问到第几个index
     function onStar(spanIndex){
         var iScore = spanIndex || iStar;
         for(var i = 0; i < spans.length; i++){
             spans[i].className = (i<iScore ? "active" : "");        
         }
     };
 
 }
 
 
...