JQuery评分控件

最新推荐文章于 2025-06-17 09:00:37 发布

疯狂的自学者

最新推荐文章于 2025-06-17 09:00:37 发布

阅读量583

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41608454/article/details/79336871

本文介绍了一个基于 HTML 和 jQuery 实现的简单易用的星级评分插件，该插件通过 CSS 和 JavaScript 控制样式及交互效果，使得用户可以轻松实现网页上的评分功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>评分控件</title>
  <script src='./jquery.js'></script>
  <style>
    li{list-style: none;float:left;width:30px;}
 </style>
</head>
<body>
  <ul>
    <li class="item">☆</li>
    <li class="item">☆</li>
    <li class="item">☆</li>
    <li class="item">☆</li>
    <li class="item">☆</li>
  </ul>
  <script>
   $(function(){
     $('.item').hover(function(e){
       $(this).text('★').prevAll().text('★');
     },function(e){
       $(this).text('☆').nextAll().text('☆');
     }).on('click',function(e){
      $(this).addClass('cur').siblings().removeClass('cur');//获取当前点击的li
     });
     $('ul').on('mouseleave',function(e){
      $('ul li.cur').text('★').prevAll().text('★').end().nextAll().text('☆');
     });
   })
  </script>
</body>
</html>