zoukankan      html  css  js  c++  java
  • 五角星评论jquery代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>五角星评分</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    ul{
    list-style: none;
    font-size: 40px;
    }
    .main li{
    float: left;
    }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
    $(document).ready(function(){
    var wjx_sel = "★";
    var wjx_none = "☆";
    // 鼠标经过时五角星变成实心的
    $(".main").on("mouseenter","li",function(){
    $(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
    })
    //鼠标点击时 给点击的li添加选中项
    .on("click","li",function(){
    $(this).addClass("clicked").siblings().removeClass("clicked");
    })
    //鼠标离开时 点击到那个五角星 哪个之前的都变成实心的
    .on("mouseleave","li",function(){
    $(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
    })
    })
    </script>
    </head>
    <ul class="main">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    </ul>
    <body>
    </body>
    </html>
  • 相关阅读:
    vue--一些预设属性
    vue--vux框架的使用
    vue--vConsole
    vue--音乐播放器
    vue--使用vue-cli构建项目
    vue--实例化对象
    vue--数据显示模版上
    CSS--交互效果
    Git SSH公钥配置
    gradle配置国内镜像
  • 原文地址:https://www.cnblogs.com/zhaocong/p/7574495.html
Copyright © 2011-2022 走看看