Jquery provides special scoring effects for users and jquery special scoring effects.

Jquery provides special scoring effects for users and jquery special scoring effects.

Js Code:

<Script type = "text/javascript"> $ (function () {// concise user rating code $ (". pfxtFen li "). click (function () {$ (this ). addClass ("pfxtCur"); $ (this ). prevAll (). addClass ("pfxtCur"); $ (this ). nextAll (). removeClass ("pfxtCur") ;}); $ (". pfxtFen li "). dblclick (function () {$ (". pfxtFen li "). removeClass ("pfxtCur") ;}) </script>

CSS

<Style type = "text/css"> * {margin: 0; padding: 0; font-family: ""} ul {list-style: none ;} /* User rating */. pingfenxitong {padding: 15px 0; width: 500px; margin: 0 auto ;}. pingfenList {float: left; width: 500px; padding-right: 20px ;}. pfxtTitle {font-weight: bold; font-size: 1.2em; padding: 4px 0 ;}. pfxtText {line-height: 25px ;}. pfxtFen {margin: 10px 0 ;}. pfxtFen li {float: left; width: 98px; height: 30px; text-align: center; line-height: 30px; border: # ddd 1px solid; background: # f1f1f1; cursor: pointer ;}. pfxtFen li. pfxtCur {background: #308A95; color: # fff; border: #308A95 1px solid;} </style>

HTML

<Div class = "pingfenxitong"> <div class = "pingfenList"> <div class = "pfxtTitle"> function: </div> <div class = "pfxtText"> do you think this idea is excellent in functionality? </Div> <ul class = "pfxtFen" title = "double-click Cancel score"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <div class = "clearfix"> </div> </ul> <div class =" pfxtRight "> </div> <div class =" clearfix "> </div> <div class =" pingfenList "> <div class =" pfxtTitle "> appearance: </div> <div class = "pfxtText"> do you think this idea looks good? </Div> <ul class = "pfxtFen" title = "double-click Cancel score"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <div class = "clearfix"> </div> </ul> <div class =" pfxtRight "> </div> <div class =" clearfix "> </div> <div class =" pingfenList "> <div class =" pfxtTitle "> Cost: </div> <div class = "pfxtText"> do you think this idea is cost-effective? </Div> <ul class = "pfxtFen" title = "double-click Cancel score"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <div class = "clearfix"> </div> </ul> <div class =" pfxtRight "> </div> <div class =" clearfix "> </div> <div class =" pingfenList "> <div class =" pfxtTitle "> difficulty: </div> <div class = "pfxtText"> do you think this idea is feasible? </Div> <ul class = "pfxtFen" title = "double-click Cancel score"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <div class = "clearfix"> </div> </ul> <div class =" pfxtRight "> </div> <div class =" clearfix "> </div> <div class =" clearfix "> </div>

The above is all the content of this article. I hope you will like it.