jquery实现类似淘宝星星评分功能实例

网络编程 2024/11/14 佚名

3 2 1

本文实例讲述了jquery实现类似淘宝星星评分功能的方法，分享给大家供大家参考之用。具体方法如下：

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"显示即时分数

id="score"显示最终分数

javascript代码如下：

<script type="text/javascript">
$(function () {
  //为所有的li标签绑定mouseout和mouseover事件。bind({事件名：function(){},事件名：function(){}})的方法绑定多个事件
  $("#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("★")
 }
  });
  //=实时显示分数.【index】搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
   $("#div li").mouseover(function () {
   $("#p").html(parseInt( $(this).index("#div li"))+1);
 });
  //鼠标按下时，确定分数。额，就不更改了，大局已定。
 $("#div li").mousedown(function () {
   $("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1)));
   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
   //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除
   $(this).unbind().prevAll().unbind().nextAll().unbind();
 });
  })
</script>

希望本文所述对大家的jQuery WEB程序设计有所帮助

jquery,类似,淘宝,星星评分,功能

标签：

jquery,类似,淘宝,星星评分,功能

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“jquery实现类似淘宝星星评分功能实例”

jquery实现类似淘宝星星评分功能实例

暂无“jquery实现类似淘宝星星评分功能实例”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

jquery实现类似淘宝星星评分功能实例

jquery,类似,淘宝,星星评分,功能

如何用JavaScript定义一个类

jquery根据锚点offset值实现动画切换

评论“jquery实现类似淘宝星星评分功能实例”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接