jQuery小练习1-3

最新推荐文章于 2022-07-14 09:53:08 发布

wsmiya

最新推荐文章于 2022-07-14 09:53:08 发布

阅读量129

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wsmiya/article/details/107034009

版权

star 评分星星

<!-- 引入iconfont -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_1911341_p3t19jmlea.css">
    <style>
        .star{
            font-size: 30px;
            color: gold;
            cursor: pointer;
        }
    </style>
<div class="container">

    </div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function(){
            let count = 10
            let score = 5

            for(let i = 0; i < count; i++){
                let star = $('<i/>').addClass('iconfont').addClass('star')
                if (i < score) star.addClass('icon-icon-')
                else star.addClass('icon-xingxing')
                $('.container').append(star)
            }

            

            $('.star').mouseenter(function(){
                let index = $(this).index()
                $('.star').each(function(i){
                    if (i <= index) {
                        $(this).addClass('icon-icon-').removeClass('icon-xingxing')
                    } else {
                        $(this).addClass('icon-xingxing').removeClass('icon-icon-')
                    }
                })
            })

            $('.star').mouseleave(function(){
                $('.star').each(function (i) {
                    if (i < score) {
                        $(this).addClass('icon-icon-').removeClass('icon-xingxing')
                    } else {
                        $(this).addClass('icon-xingxing').removeClass('icon-icon-')
                    }
                })
            })

            $('.star').click(function(){
                score = $(this).index() + 1
            })

        })
    </script>