[轉貼]使用js jquery 寫評價星級

 

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <style type="text/css">
        .stars{
            white-space: nowrap;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .stars li{
            display: inline-block;
            color: #ADADAD;
            font-size: 40px;
        }
    </style>

    <body>
        <ul class="stars">
            <li>★</li>
            <li>★</li>
            <li>★</li>
            <li>★</li>
            <li>★</li>
        </ul>
        <script src="../../js/common/jquery-git.js"></script>
        <script>
        $(function() {
                //为星星设置hover效果
                var isClicked = false;
                var beforeClickedIndex = -1;
                var clickNum = 0; //点击同一颗星次数

                $('li').hover(
                    function() {
                        if(!isClicked) {
                            $(this).css('color', '#F0AD4E');
                            var index = $(this).index();

                            for(var i = 0; i <= index; i++) {
                                $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
                            }
                        }
                    },
                    function() {
                        if(!isClicked) {
                            $('li').css('color', '#ADADAD');
                        }
                    }
                );

                //星星点击事件
                $('li').click(function() {
                    $('li').css('color', '#ADADAD');
                    isClicked = true;
                    var index = $(this).index();

                    for(var i = 1; i <= index+1; i++) {
                        $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
                    }
                    if(index == beforeClickedIndex) { //两次点击同一颗星星 该星星颜色变化
                        clickNum++;
                        if(clickNum % 2 == 1) {
                            $('li:nth-child(' + (index + 1) + ')').css('color', '#ADADAD');
                        } else {
                            $('li:nth-child(' + (index + 1) + ')').css('color', '#F0AD4E');
                        }

                    } else {
                        clickNum = 0;
                        beforeClickedIndex = index;
                    }
                });
            });
        </script>
    </body>

</html>

js写评价的星星,版权声明:本文为博主原创文章,遵循CC4.0by-sa版权协议,转载请附上原文出处链接和本声明。刚开始接触写星星评价时,哇!估计脑子刚被驴踢了,竟然想到了最笨的办法-手工画五角星。妈呀!css样式都写了好大一串,还沾沾自喜终于画出来了,然后瞅一瞅旁边的妹子写得怎么样了,哇!人家机智的!直接用符号★就解决了!!!唉,智商捉急呀!先上图看看吧:虽然简单,还是有几个注意的地方:1.未点

內容出處: js写评价的星星_51CTO博客_html带星星的评价

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *