jquery03-05用户评论五角星案例

最新推荐文章于 2020-10-29 11:05:12 发布

python基础教程

最新推荐文章于 2020-10-29 11:05:12 发布

阅读量420

点赞数

分类专栏： 02jquery

本文链接：https://blog.csdn.net/stopcpp/article/details/53082002

版权

02jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
            color:red;
            //设置字体大小，也可以清除li是inline-block的时候li之间间距
            /*font-size: 0;*/
            //设置字符间距可以清除li是inline-block的时候li之间的间距
            /*letter-spacing: -3px;*/
            //设置单词间距
            /*word-spacing:-3px;*/
        }
        li {
            float: left;
            font-size:40px;
            display: inline-block;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            var wjx_sel = "★",wjx_none="☆";
           $("ul").on("mouseenter","li", function () {
//               $("li").html("★");
//               $(this).nextAll().html("☆");

//               $(this).text(wjx_sel).prevAll().text(wjx_sel);
//               $(this).nextAll().text(wjx_none);
               $(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", function () {
               $("li").text(wjx_none);
               //第三步：当鼠标移开评分控件的时候，把clicked之前的(包括自己的)五角星变成实心的，后面的变成空心的。
                 $(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
           });
        });
    </script>
</head>
<body>
<ul>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
</body>
</html>

python基础教程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery03-05用户评论五角星案例

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul { list-styl
复制链接

扫一扫