基于jquery实现五星好评-偶像资源网

在电商网站，我们经常会用到五星评分的功能，现在用jQuery实现一个简单的demo

<!DOCTYPE html> 
<html lang=\"en\"> 
<head> 
  <meta charset=\"UTF-8\"> 
  <title>五角星评分案例</title> 
  <style> 
    * { 
      padding: 0; 
      margin: 0; 
    } 
    .comment { 
      font-size: 40px; 
      color: teal; 
    } 
    .comment li { 
      float: left; 
    } 
    ul { 
      list-style: none; 
    } 
  </style> 
</head> 
<body> 
<ul class=\"comment\"> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
</ul> 
 
<script src=\"jquery-1.12.2.js\"></script> 
<script> 
  $(function () { 
    var wjx_k = \"☆\"; 
    var wjx_s = \"★\"; 
    //prevAll获取元素前面的兄弟节点，nextAll获取元素后面的所有兄弟节点 
    //end 方法；返回上一层 
    //siblings 其它的兄弟节点 
    //绑定事件 
    $(\"li\").on(\"mouseenter\", function () { 
      $(this).html(wjx_s).prevAll().html(wjx_s).end().nextAll().html(wjx_k); 
    }).on(\"click\", function () { 
      $(this).addClass(\"active\").siblings().removeClass(\"active\") 
    }); 
    $(\"ul\").on(\"mouseleave\", function () { 
      $(\"li\").html(wjx_k); 
      $(\".active\").text(wjx_s).prevAll().text(wjx_s); 
    }) 
  }); 
</script> 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

基于jquery实现五星好评

请登录后发表评论