[Html]Jquery实现星级评分效果

最新推荐文章于 2021-06-17 07:03:10 发布

置顶 MrCoffee2019

最新推荐文章于 2021-06-17 07:03:10 发布

阅读量1.7k

点赞数 1

分类专栏： Html Jquery 文章标签： HTML jQuery

本文链接：https://blog.csdn.net/zjk20108023/article/details/8773654

版权

Html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Jquery

2 篇文章 0 订阅

订阅专栏

<!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>
    <title>Rate</title>
    <script type="text/javascript" src="Scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            for (var i = 0; i < 5; i++) {
                var divMsg = "<img src='/Content/Img/graystar.gif' alt='miss' style='cursor:pointer'/>";
                $('#initialize').append(divMsg);
            }
            RateMsg(-1);

            $("img").each(function () {
                var enabled=true;
                $(this).hover(function () {
                    var pic;
                    var num = $(this).index();//Get the index of the current star
                    if (num < 2) {
                        pic = "poorstar";
                    }
                    else {
                        pic = "goodstar";
                    }
                  //Bind the url of pic to the  current position of tag 'img'
                    for (var i = 0; i < num + 1; i++) {
                        $("img").eq(i).attr("src", "/Content/Img/" + pic + ".gif");
                        RateMsg(i + 1);
                    }
                    //Unbind the url of pic to the remaining img
                    for (var j = num + 1; j < 5; j++) {
                        $("img").eq(j).attr("src", "/Content/Img/graystar.gif");
                    }

                });

                $(this).mouseout(function () {
                    if (enabled) {
                        for (var i = 0; i < 5; i++) {
                            $("img").eq(i).attr("src", "/Content/Img/graystar.gif");
                        }
                        RateMsg(-1);
                    }

                });
                $(this).click(function () {
                    enabled = false;
                    var rate = $(this).index() + 1;//Get the rate
                    RateMsg(rate)
                });
            });

            //Show the msg of rate
            function RateMsg(rate) {
                switch (rate) {
                    case 1: text = "Very Poor!";
                        break;
                    case 2: text = "Poor!";
                        break;
                    case 3: text = "Good!"
                        break;
                    case 4: text = "Very Good!"
                        break;
                    case 5: text = "Great!";
                        break;
                    case -1: text = "Please rate here";
                        break;
                }
                $('#rateMsg').html(text);
            }


        });
    </script>
</head>
<body>
    <div>
        <span id="initialize"></span><span id="rateMsg"></span>
    </div>
</body>
</html>

效果图：

Images:就是三种颜色的图片而已。

MrCoffee2019

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
[Html]Jquery实现星级评分效果

Rate $(function () { for (var i = 0; i < 5; i++) { var divMsg = ""; $('#initialize').append(divMsg); } RateMsg(-1)
复制链接

扫一扫