The example of this article is about jquery to achieve a similar function of Taobao Star scoring method, share for everyone for reference. The specific methods are as follows:
The HTML part of the code is as follows:
<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>
In the preceding code:
Id= "P" shows instant scores
Id= "score" shows final score
The JavaScript code is as follows:
<script type= "Text/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 ();
});
}
</script>
I hope this article will help you with your jquery Web programming.
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
