您好,欢迎访问一九零五行业门户网

jquery做出评分系统

这次给大家带来jquery做出评分系统,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>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
datatable插件可以实现异步加载吗?
jquery必须掌握的api
怎样实现文件上传带进度条动画
jquery实现多层验证后的表单验证
以上就是jquery做出评分系统的详细内容。
其它类似信息

推荐信息