Of Stack

Jquery is similar to taobao star rating function example

  • 2020-03-30 03:55:25
  • OfStack

This article is an example of how jquery implements the function of taobao.com star rating. Specific methods are as follows:

The HTML code is as follows: 


<body>
  <div id="div">
    <ul>
      <li> Do things </li>
      <li> Do things </li>
      <li> Do things </li>
      <li> Do things </li>
      <li> Do things </li>
    </ul>
  </div>
  <p id="p"></p>
  <p id="score"></p>
</body>

In the above code:

Id ="p" displays the immediate score

Id ="score" shows the final score

The javascript code is as follows: 


<script type="text/javascript">
$(function () {
  //Bind mouseout and mouseover events for all li tags. Methods bind({event name: function(){}, event name: function(){}}) bind multiple events
  $("#div li").bind({
 mouseout:function () {
   $(this).css("color", "black").html(" Do things ").prevAll().css("color", "black").html(" Do things ")
 },
 mouseover: function () {
   $(this).css("color", "red").html(" u ").prevAll().css("color", "red").html(" u ")
 }
  });
  //[index] search for matched elements and return the index value of corresponding elements, counting from 0.
   $("#div li").mouseover(function () {
   $("#p").html(parseInt( $(this).index("#div li"))+1);
 });
  //When the mouse is pressed, determine the score. Well, I won't change it. It's all set.
 $("#div li").mousedown(function () {
   $("#score").html((" The score you choose is " + (parseInt($(this).index("#div li")) + 1)));
   $(this).css("color", "red").html(" u ").prevAll().css("color", "red").html(" u ")
   //All binding events for all li tags are cleared -- the unbind method can clear a specific event with an argument. Not all clear
   $(this).unbind().prevAll().unbind().nextAll().unbind();
 });
  })
</script>
Related articles: