用jQuery实现星星好评wink~

最新推荐文章于 2024-08-28 10:35:52 发布

原创最新推荐文章于 2024-08-28 10:35:52 发布 · 2.3k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #jquery #css3 #html5 #前端

案例向专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用jQuery实现星星好评的交互效果。通过在HTML中设置星星元素，结合CSS样式，然后利用jQuery绑定触摸事件，动态改变星星的实心与空心状态，实现点击星星时，被点击及之前星星变实心，其他为空心。同时，添加鼠标离开事件，以保持用户选择的状态。

效果展示:

请添加图片描述

思路

一.首先在html中准备五颗空心的小星星

    <ul>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

二.给星星添加css样式

       body {
            font-family: "simsun";
        }
        
        ul {
            list-style: none;
            font-size: 44px;
            color: red;
        }
        
        li {
            cursor: pointer;
            float: left;
        }

三.给星星添加jQuery代码：
1.这里是是先给每颗星星绑定触摸事件。而当前触碰的星星给一个类名。该星星自己和前面的变为实心星星。后面的全部为空心星星

       $("li").on("mouseover", function() {
                $("li").removeClass("current");
                $(this).prevAll("li").text("★");
                $(this).text("★");
                $(this).nextAll("li").text("☆");
            });

2.给点击的星星添加绑定事件给一个类名

$("li").on("click", function() {
                $(this).addClass("current");
            });

ps:但是这个类名只有点击的星星可以有，所有在绑定触摸事件中想通过隐式迭代，删除类名，达到每次点击只有点击的星星拥有类名
3.当鼠标离开星星的时候，添加离开事件，检测li中是否有前面添加的类名。如果有，则该类名的星星以及前面的星星全是实星。若没有则鼠标离开时所有星星都是空心

         $("ul").on("mouseleave", function() {
                if ($(".current").length == 0) {
                    $("li").text("☆");
                } else {
                    $(".current").text("★");
                    $(".current").prevAll("li").text("★");
                    $(".current").nextAll("li").text("☆");
                }
            });