学习jQuery第三天

最新推荐文章于 2024-08-09 02:16:38 发布

逆魂夜

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量90

点赞数

分类专栏： jQuery js

本文链接：https://blog.csdn.net/qq_44388393/article/details/87815995

版权

jQuery 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

通过js和jQuery分别写评星的代码

js部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, div, ul, li, p {
            margin: 0;
            padding: 0;
        }

        body {
            color: #666;
            font: 12px/1.5 Arial;
        }

        ul {
            list-style-type: none;
        }

        #star {
            position: relative;
            width: 600px;
            margin: 10px auto;
        }

        #star ul, #star span {
            float: left;
            display: inline;
            height: 19px;
            line-height: 19px;
        }

        #star ul {
            margin: 0 10px;
        }

        #star li {
            float: left;
            width: 24px;
            cursor: pointer;
            text-indent: -9999px;
            background: url(http://www.fgm.cc/learn/lesson4/img/star.png) no-repeat;
        }

        #star strong {
            color: #f60;
            padding-left: 10px;
        }

        #star li.on {
            background-position: 0 -28px;
        }

        #star p {
            position: absolute;
            top: 20px;
            width: 159px;
            height: 60px;
            display: none;
            background: url(http://www.fgm.cc/learn/lesson4/img/icon.gif) no-repeat;
            padding: 7px 10px 0;
        }

        #star p em {
            color: #f60;
            display: block;
            font-style: normal;
        }
    </style>
    <script>
        window.onload = function () {
            var aMsg = [
                "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
                "不满意|部分有破损，与卖家描述的不符，不满意",
                "一般|质量一般，没有卖家描述的那么好",
                "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
                "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
            ]

            var index = 0;
            var texta = aMsg[index].match(/(.+)\|/)[1];
            var textb = aMsg[index].match(/\|(.+)/)[1];

            var lis = document.getElementsByTagName("li")
            var spans = document.getElementsByTagName("span")[1]
            var ps = document.getElementsByTagName("p")[0]

            for (var i = 0; i < lis.length; i++) {
                lis[i].index = i + 1;
                lis[i].onmouseover = function () {
                    //循环判断是否添加  on
                    for (var j = 0; j < lis.length; j++) {
                        lis[j].className = j<this.index?"on":"";
                    }
                    //p显示
                    ps.style.display = "block";
                    //p移动
                    ps.style.left = this.index * 25 + "px";
                    ps.innerHTML = "<em><b>" + this.index + "</b>" + "分 " + texta + "</em>" + textb;
                }
                lis[i].onmouseleave=function () {
                    //p隐藏
                    ps.style.display = "none";
                }
                lis[i].onclick=function () {
                    ps.style.display = "none";
                    spans.innerHTML="<strong>"+this.index+" 分"+"</strong>"+"("+textb+")";
                }
            }

        }
    </script>
</head>
<body>
<div id="star">
    <span>点击星星就能打分</span>
    <ul>
        <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li><a href="javascript:;">4</a></li>
        <li><a href="javascript:;">5</a></li>
    </ul>
    <span></span>
    <p></p>
</div>
</body>
</html>

jQuery部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, div, ul, li, p {
            margin: 0;
            padding: 0;
        }

        body {
            color: #666;
            font: 12px/1.5 Arial;
        }

        ul {
            list-style-type: none;
        }

        #star {
            position: relative;
            width: 600px;
            margin: 10px auto;
        }

        #star ul, #star span {
            float: left;
            display: inline;
            height: 19px;
            line-height: 19px;
        }

        #star ul {
            margin: 0 10px;
        }

        #star li {
            float: left;
            width: 24px;
            cursor: pointer;
            text-indent: -9999px;
            background: url(http://www.fgm.cc/learn/lesson4/img/star.png) no-repeat;
        }

        #star strong {
            color: #f60;
            padding-left: 10px;
        }

        #star li.on {
            background-position: 0 -28px;
        }

        #star p {
            position: absolute;
            top: 20px;
            width: 159px;
            height: 60px;
            display: none;
            background: url(http://www.fgm.cc/learn/lesson4/img/icon.gif) no-repeat;
            padding: 7px 10px 0;
        }

        #star p em {
            color: #f60;
            display: block;
            font-style: normal;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var aMsg = [
                "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
                "不满意|部分有破损，与卖家描述的不符，不满意",
                "一般|质量一般，没有卖家描述的那么好",
                "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
                "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
            ]
            var index=0;

            $("li").on("mouseenter",function () {
                index=$(this).index()
                $(this).addClass("on").prevAll().addClass("on");
                $(this).nextAll().removeClass("on");
                var texta=aMsg[index].match(/(.+)\|/)[1];
                var textb=aMsg[index].match(/\|(.+)/)[1];
                var b=$("<b></b>")
                var em=$("<em></em>");
                $("p").text(textb);
                $(em).prependTo($("p")).text("分 "+texta);
                $("p").show()
                $(b).prependTo($(em)).text(index+1);
                $("p").css("left",index*25+25)
            })
            $("li").on("mouseleave",function () {
                $("p").hide();
            })
            $("li").on("click",function () {
                // $(this).addClass("on").prevAll().addClass("on");
                index=$(this).index()
                var textb=aMsg[index].match(/\|(.+)/)[1];
                var strong=$("<strong></strong>");
                $("span").eq(1).text(" ("+textb+")");
                $(strong).prependTo($("span").eq(1)).text(index+1)

            })




        })
    </script>
</head>
<body>
<div id="star">
    <span>点击星星就能打分</span>
    <ul>
        <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li><a href="javascript:;">4</a></li>
        <li><a href="javascript:;">5</a></li>
    </ul>
    <span></span>
    <p></p>
</div>
</body>
</html>