In general, I created a beautiful rating form, it works without JS, but I need to revive it:

.rating-form { padding-top: 20px } .rating-form:after { display: table; clear: both; content: "" } .rating-form .total-vote { margin-bottom: 20px; color: #ccc } .rating { margin-bottom: 10px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } .rating:after { display: table; clear: both; content: "" } .rating label, .rating>input:checked ~ label { width: 16px; height: 16px; overflow: hidden; white-space: nowrap; cursor: pointer; text-indent: -9999px } .rating:not(:checked)>label, .rating>input:checked ~ label, .rating:not(:checked)>label:hover, .rating>input:checked+label:hover, .rating>input:checked+label:hover ~ label, .rating>label:hover ~ input:checked ~ label, .rating:not(:checked)>label:hover ~ label { background: url("http://artlenk.ru/project/star.png") no-repeat } .rating:not(:checked)>input { position: absolute; top: -9999px; clip: rect(0, 0, 0, 0) } .rating:not(:checked)>label { background-position: 0 -16px } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/js-cookie/js-cookie/master/src/js.cookie.js"></script> <form action="#" class="rating-form"> <div class="rating"> <input type="radio" id="star5" name="rating" value="5"> <label for="star5" title="5">5</label> <input type="radio" id="star4" name="rating" value="4"> <label for="star4" title="4">4</label> <input type="radio" id="star3" name="rating" value="3"> <label for="star3" title="3">3</label> <input type="radio" id="star2" name="rating" value="2"> <label for="star2" title="2">2</label> <input type="radio" id="star1" name="rating" value="1"> <label for="star1" title="1">1</label> </div> <div class="total-vote"><span class="count">2</span> голоса</div> </form> 

  1. When clicking on a star, the value from value is taken and 1 click is taken into account, which is entered into the session.
  2. The click that was made on the star is displayed in .count (the session does not allow the script to count the clicks of one user).
  3. If another user (or from another browser) puts a rating (by clicking on a star), the first two points are repeated again and the votes are summed up, displayed on the screen with the tag with the class .count

I understand this, but I cannot write these actions to the script.

  • If possible, please make a code so that you can run and see - Mr. Black
  • made and added the necessary libraries. - alex-lenk
  • What role should the script play? - Mr. Black
  • the role of the script to bring the current assessment and take into account the new assessment. True, I do not know if JS can record the actions of one user somewhere, which would take into account when another leaves a rating. - alex-lenk
  • It is better to display the current rating when the page loads, and if the rating is changed, you can send a request to the server - Black

0