JS star rating

Note:

This method uses the Jquery library and is currently compatible with IE8. The stars in the two colors in this example are all placed in a png image. Of course there are other implementation ideas. This example shows that the current page has only one star rating.

Ideas:

The number of stars is displayed by listening to three events: mouseenter, mouseout, and click. I used two variables (temp_value, choice_value) to store the currently selected star value and the current temporary star value;

• Temp_value: the temporary star value;
• Choice_value: The selected star value;
• Mouseenter: move the mouse in to obtain the current star level and assign temp_value to adjust the color of the current star image;
• Mouseout: remove the mouse. Compare the choice_value to adjust the color of the star image;
• Click: After clicking the mouse, obtain the current star value and assign it to choice_value. (Note that the mouseenter event has been performed before clicking and the mouseout event has been performed after clicking)
• After selecting a value, you can use JS to obtain the value of the choice_value variable when you need to submit the evaluation value;

  HTML Structure Code:

  Rating:
     
     
          
      
      
          
      
      
              
      
      
          
      
      
          
      
      
      
     
     

  Note: if there is more than one star rating on the page, that is, multiple rows, you only need to modify the li id in the Dom and add dynamic subscript, to distinguish different elements. Another point is that I put the selected star value in the JS variable. When there are multiple rating values, we recommend that you add a hidden form field to the Dom to store the selected star value.

  JS implementation code:

  <Script src = "http://code.jquery.com/jquery-latest.js"> </script> <script type = "text/javascript"> $ (document ). ready (function () {var _ temp_value = 0, // The level value choiceValue = 0 when the mouse hover; // The default level value is 1 // $ ("# star li") when the mouse is moved in "). mouseenter (function () {// get the current star _ temp_value = new Number ($ (this ). attr ("star"); showStar (); // when the mouse is moved in }). mouseout (function () {hideStar (); // when the mouse is moved in }). click (function () {// click to set the selected value choiceValue = _ temp_value;
  HideSatr () ;}); // star display function showStar () {for (var I = 1; I <_ temp_value + 1; ++ I) {$ ("# star" + I ). addClass ("choice") ;}} function hideStar () {for (var I = 5; I> choiceValue; -- I) {$ ("# star" + I ). removeClass ("choice") ;}}); </script>

  If you have any questions, please contact me! Here is the Demo address: http://xiaoweijs.duapp.com/demo/star-level/index.html

  Author: Ziv Serena
  Source: http://www.cnblogs.com/zivxiaowei/
  About the author: programmers who focus on Java Technology keep a high interest in JS development. Like music, reading, FM, etc.
  The copyright of this article is shared by the author and the blog. You are welcome to repost this article, but you must keep this statement without the author's consent and provide a connection to the original article on the article page.
  If there is a problem, you can mail: wewoor@foxmail.com
  Weibo: Ziv Xiaowei