Home > Developer > JavaScript
JQuery implements star comment code based on ajax, jqueryajax
This example describes how jQuery implements the star comment code based on ajax. Share it with you for your reference. The details are as follows:
Here, jquery is used to simulate the star comment function of the review network. In the Ajax comment module, you can click the star to review the comment. below is the score. You can click it to score it. This is very popular on the Internet, this code is relatively complete and I believe many of my friends will like it.
Let's take a look at the running effect:
The Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd "> <HTML xmlns =" http://www.w3.org/1999/xhtml "> <HEAD> <TITLE> jquery stars comment </TITLE> <style> body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, img, dl, dt, dd, table, th, td, blockquote, fieldset, div, strong, label, em {margin: 0; padding: 0; border: 0;} ul, ol, li {list-style: none;} input, button {margin: 0; font-size: 12px; vertical-align: middle;} body {font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-align: left; margin: 0 auto;} table {border-collapse: collapse; border-spacing: 0;} B, em, I {font-style: normal; font-weight: normal;} h1, h2, h3, h4 {font-size: 14px;} h5 {font-size: 12px;} h6 {font-size: 12px; font-style: normal ;}. fl {float: left; display: inline ;}. box_163css {width: 480px; margin: 20px auto; height: 30px ;}. s_name {float: left; display: block; width: 60px; padding-top: 4px; text-align: right ;}. star_ul {background: url (http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat 0-150px; width: 132px; z-index: 10; position: relative; height: 25px ;}. star_ul li {float: left; margin-right: 1px; width: 25px; height: 25px ;}. star_ul li a {display: block; height: 25px; position: absolute; left: 0; top: 0; text-indent:-999em ;}. star_ul li. active-star {background: url (http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat ;}. star_ul li. one-star {width: 25px; background-position: 0-120px; z-index: 50 ;}. star_ul li. two-star {width: 51px; background-position: 0-90px; z-index: 40 ;}. star_ul li. three-star {width: 79px; background-position: 0-60px; z-index: 30 ;}. star_ul li. four-star {width: 105px; background-position: 0-30px; z-index: 20 ;}. star_ul li. five-star {width: 129px; margin-right: 0; background-position: 0 0; z-index: 10 ;}. s_result {padding: 6px 0 0 5px ;}. square_ul {background: url (http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat 0-222px; width: 146px; z-index: 10; position: relative; height: 20px ;}. square_ul li {float: left; margin-right: 1px; width: 29px; height: 20px ;}. square_ul li a {display: block; height: 20px; position: absolute; left: 0; top: 0; text-indent:-999em ;}. square_ul li. active-square {background: url (http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat ;}. square_ul li. square-1 {width: 29px; background-position: 0-243px; z-index: 50 ;}. square_ul li. square-2 {width: 58px; background-position: 0-pixel PX; z-index: 40 ;}. square_ul li. square-3 {width: 87px; background-position: 0-285px; z-index: 30 ;}. square_ul li. square-4 {width: pixel PX; background-position: 0-306px; z-index: 20 ;}. square_ul li. square-5 {width: 145px; margin-right: 0; background-position: 0-327px; z-index: 10 ;}. s_result_square {padding: 4px 0 0 9px ;} </style> <SCRIPT src = "jquery-1.6.2.min.js" type = text/javascript> </SCRIPT> </HEAD> <script type = "text/javascript"> $ (function () {$ ('. star_ul evaluate ('score ')}); $ ('. star_ul '). click (function () {alert(('.s_result'{.html ();}) $ ('. square_ul scores ('Please rating')}); $ ('. square_ul '). click (function () {alert((%(this%.parents('.box_163css'%.find('.s_result_square'%.html ());})}) </script> <BODY> <div class = "box_163css"> <span class = "s_name"> overall evaluation: </span> <ul class = "star_ul fl"> <li> <a class = "one-star" title = "poor" href = "#"> </a> </li> <a class = "two-star" title = "" href = "#"> </a> </li> <class = "three-star" title = "OK" href = "#"> </a> </li> <a class = "four-star" title = "Good" href = "#"> </a> </li> <a class = "five-star" title = "good" href = "#"> </a> </li> </ul> <span class = "s_result fl"> score </span> </div> <div class = "box_163css"> <span class = "s_name"> taste: </span> <ul class = "square_ul fl"> <li> <a class = "square-1" title = "" href = "#"> </a> </li> <a class = "square-2" title = "general" href = "#"> </a> </li> <class = "square-3" title = "" href = "#"> </a> </li> <a class = "square-4" title = ""Good" href = "#"> </a> </li> <a class = "square-5" title = "very good" href = "#"> </a> </li> </ul> <span class = "s_result_square fl"> score </span> </div> <div class = "box_163css"> <span class = "s_name"> environment: </span> <ul class = "square_ul fl"> <li> <a class = "square-1" title = "" href = "#"> </a> </li> <a class = "square-2" title = "general" href = "#"> </a> </li> <class = "square-3" title = "" href = "#"> </a> </li> <a class = "square-4" title =" "Good" href = "#"> </a> </li> <a class = "square-5" title = "very good" href = "#"> </a> </li> </ul> <span class = "s_result_square fl"> score </span> </div> <div style = "text-align: center; clear: both "> </div> </BODY> </HTML>
I hope this article will help you with jquery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
