zoukankan      html  css  js  c++  java
  • jQuery 五角星评分

    五角星打分  

    我用的是搜狗输入法上带的特殊符号打出来的  空五角星:☆  实五角星:★

    1.html

    1  <ul class="comment">
    2         <li></li>
    3         <li></li>
    4         <li></li>
    5         <li></li>
    6         <li></li>
    7     </ul>

    2.css

     1  * {
     2             margin: 0;
     3             padding: 0;
     4         }
     5         
     6         .comment {
     7             font-size: 45px;
     8             color: orange;
     9             list-style: none;
    10         }
    11         
    12         .comment li {
    13             float: left;
    14         }

    3.jquery

     1  $(function() {
     2             $(".comment li").hover(function() {
     3                 // over
     4                 //prevAll()获取当前元素之前的所有兄弟元素
     5                 $(this).text("★").prevAll().text("★");
     6             }, function() {
     7                 // out
     8                 //如果被点中的话就不变成空的五角星 这里用的是三元一次运算符判断的
     9                 $(this).hasClass("clicked") ? (this).text("★").prevAll().text("★") : $(this).text("☆").prevAll().text("☆");
    10             }).click(function() {
    11                 //addClass只是用来判断是否被点中
    12                 $(this).addClass("clicked").prevAll().addClass("clicked");
    13                 //分数
    14                 alert(($(this).prevAll().length + 1) * 20 + "分");
    15             });
    16         })
  • 相关阅读:
    border-radius
    快速搭建本地服务器
    sublime中侧边栏字体大小的设置
    关于git中git pull --rebase中的一些坑
    css中外边距合并
    php中$row=mysql_fetch_row()出错问题
    学习笔记2
    AMD Ryzen的性价比
    javascript变量提升
    手机网页里的模态对话框
  • 原文地址:https://www.cnblogs.com/xiemin-minmin/p/11027522.html
Copyright © 2011-2022 走看看