The HTML part of the code is as follows:
In the preceding code:
Id= "P" shows instant scores
Id= "score" shows final score
The JavaScript code is as follows:
01 |
<script type= "Text/javascript" > |
03 |
Bind Mouseout and MouseOver events for all Li tags. Bind ({event name: function () {}, Event name: function () {}}) method to bind multiple events |
04 |
$ ("#div li"). Bind ({ |
05 |
Mouseout:function () { |
06 |
$ (this). CSS (' color ', ' black '). HTML ("☆"). Prevall (). CSS ("Color", "BLACK"). HTML ("☆") |
08 |
Mouseover:function () { |
09 |
$ (this). CSS ("Color", "red"). HTML ("★"). Prevall (). CSS ("Color", "red"). HTML ("★") |
12 |
= Show fractions in real time. "Index" searches for matching elements and returns the index value of the corresponding element, counting starting at 0. |
13 |
$ ("#div li"). MouseOver (function () { |
14 |
$ ("#p"). HTML (parseint (this). Index ("#div li")) +1); |
16 |
When the mouse is pressed, the score is determined. Well, it will not change, the overall situation has been set. |
17 |
$ ("#div li"). MouseDown (function () { |
18 |
$ ("#score"). HTML ("The score you selected is" + ($ (this). Index ("#div li")) ("parseint") + 1)); |
19 |
$ (this). CSS ("Color", "red"). HTML ("★"). Prevall (). CSS ("Color", "red"). HTML ("★") |
20 |
All of the LI tag's binding events are cleared--unbind method can be added with parameters to clear specific events. Not all clear |
21st |
$ (this). Unbind (). Prevall (). Unbind (). Nextall (). Unbind (); |