Html
<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
$ (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 of the LI tag's binding events are cleared--unbind method can be added with 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.