Html
| 1 2 3 4 5 6 7 8 9 10 11 12-13 | <body> <div id= "div" > <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div> <p id= "P" ></p> <p id= "Score" ></p> </body> |
Id= "P" shows instant scores
Id= "Score" shows the final score----------------------------------------------
JavaScript
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The | $ (function () { //binds mouseout and mouseover events for all Li tags. Bind ({event name: function () {}, Event name: function () {}}) method binds multiple events $ ("#div li"). Bind ({mouseout:function () {$ (this). CSS ("Color", " Black "). HTML (" ¡î "). Prevall (). CSS (" Color "," BLACK "). HTML (" ☆ ")}, Mouseover:function () {$ (this). CSS (" Color "," red "). HTML ("★"). Prevall (). CSS ("Color", "red"). HTML ("★")}}); = Show fractions in real time. "Index" searches for matching elements and returns the index value of the corresponding element, counting starting at 0. $ ("#div li"). MouseOver (function () {$ ("#p"). HTML (parseint (this). Index ("#div li")) (+1);}); When the mouse is pressed, the score is determined. Well, it will not change, the overall situation has been set. $ ("#div li"). MouseDown (function () {$ ("#score"). HTML ("Your selected score is" + (parseint ($ (this). Index ("#div li")) + 1)); $ (this). CSS ("Color", "red"). HTML ("★"). Prevall (). CSS ("Color", "red"). HTML ("★")//All Li tag binding events clear the--unbind method can add parameters to clear specific events. Do not remove all $ (this). Unbind (). Prevall (). Unbind (). Nextall (). Unbind (); }); }) |
The effect is this:
It's a pity that you click on it--it's not going to change. It's really sad. Probably just made a small appearance.
Prevall () and Nextall () two methods? Let's talk about the way. Documents in jquery can be found.
Index in jquery is the index value of the returned element, starting from scratch. I'll add 1 to the score.
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
