使用input hidden實現
以後儘量多謝註釋以便理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星級評價</title>
<style>
.spj:after{ content: '';display: block;clear: both;height: 0;visibility: hidden;}
.clearfix{ zoom: 1;}
.spj ul li,.spj ul{ float:left; padding: 0; margin: 0;}
.spj ul li{ list-style: none; font-size: 26px; color:#999; padding:0 5px; cursor: pointer;user-select: none; font-weight:bold;}
.spj ul li.col{ color: #ee0;}
.spj span{ line-height: 30px; margin-left: 15px;}
</style>
</head>
<body>
<input type="hidden" value="3" title="10">
<input type="hidden" value="">
<script>
var input=document.querySelectorAll('input[type="hidden"]');
input.forEach(function(_input){
var _inputTitle=_input.getAttribute('title')|| 5;
var div=document.createElement('div');
//清除浮動
div.className='spj clearfix';
_input.parentNode.insertBefore(div,_input);
var ul=document.createElement('ul');
div.appendChild(ul);
var number= ["零","一","二","三","四","五","六","七","八","九","十"];
//動態添加五角星
for (var i =1; i <=_inputTitle; i++){
var li=document.createElement('li');
ul.appendChild(li);
li.innerHTML='★';
li.title=number[i]+'星好評';
}
var span=document.createElement('span');
div.appendChild(span);
var LI=ul.querySelectorAll('li');
//默認有value改變顏色
for (var j = 0; j <= _input.value; j++) {
//當前一個都沒有被點擊時不用循環
if(_input.value=="")break;
LI[j].className = 'col';
}
span.innerHTML=_input.value?""+number[_input.value]+"星好評":"";
LI.forEach(function(_li,a){
_li.onclick=function(){
span.innerHTML=_li.title;
//當前點擊選中的星的下標
_input.value=a;
}
_li.onmouseover=function(){
//清除選中的星的顏色
for (var i = 0; i < LI.length; i++) {
LI[i].className = '';
}
//當前移上的星和他前面的都變顏色
for (var j= 0; j <= a; j++ ){
LI[j].className='col';
}
}
_li.onmouseout=function(){
//清除沒有點擊選中的
for (var i = 0; i < LI.length; i++) {
LI[i].className = '';
}
//鼠標移開後變回選中的星
for (var j = 0; j <= _input.value; j++) {
//當前一個都沒有被點擊時不用循環
if(_input.value=="")break;
LI[j].className = 'col';
}
}
})
})
</script>
</body>
<html>清除li 的類時原本想寫一個方法反覆調用的，結果發現只有最後一組有效，其他的都清除不了（猜測可能是foreach裏面方法名一樣的話，後面的會覆蓋了前面的方法），暫時沒想到解決辦法；