Here and friends to share a use of JS to achieve the results of the mall star score, I hope to give you some help, of course, better effects are still to be improved.
HTML is as follows:
<div class= "starts" >
<ul id= "Pingstar" >
<li rel= "1" title= "particularly bad, give 1 points" ></li>
< Li rel= "2" title= "very poor, give 2 points" ></li>
<li rel= "3" title= "General, to 3 points" ></li>
<li rel= "4" title= "Very good, give 4 points" ></li>
<li rel= "5" title= "very good, give 5 points" ></li>
<span id= "dir" ></span>
</ul>
<input type= "hidden" value= "id=" STARTP ">
</div>
CSS style:
. starts,.starts Ul{float:left;
STARTS{PADDING-LEFT:16PX;PADDING-TOP:7PX}
. Starts UL Li{width:32px;height:31px;float:left;background: #ddd;p adding-right:3px;
Starts UL li.on{background:red;
Starts UL span{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}
The last JS call is as follows:
Window.onload = function () {var s = document.getElementById ("Pingstar"), M = Docum Ent.getelementbyid (' dir '), n = s.getelementsbytagname ("li"), input = document.getElementById (' STARTP ');
Save the selected value ClearAll = function () {for (var i = 0; i < n.length; i++) {n[i].classname = ';
for (var i = 0; i < n.length i++) {N[i].onclick = function () {var q = this.getattribute ("rel");
ClearAll ();
Input.value = q;
for (var i = 0; i < Q; i++) {n[i].classname = ' on ';
} m.innerhtml = This.getattribute ("title");
} n[i].onmouseover = function () {var q = this.getattribute ("rel");
ClearAll ();
for (var i = 0; i < Q; i++) {n[i].classname = ' on ';
} n[i].onmouseout = function () {ClearAll ();
for (var i = 0; i < Input.value. i++) {n[i].classname = ' on '; }
}
}
}
The above is the entire content of this article, I hope to learn about the jquery program to help.