请大佬指点，我不是很理解这个星星评分是怎么选中当前和前面的星星的，还有点击了星星移出如何保持点击状态不被移出状态清除。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/JavaScript" src="http://m.968ch.com/UserStyle/lxj/foodback/style/jquery-2.1.4.js"></script>

    <title>百度文库评分</title>
    <style>
        html,
        body,
        p {
            margin: 0;
            padding: 0;
        }

        p {
            border: 1px solid #eee;
            width: 400px;
            margin: 50px auto;
            text-align: center;
            padding: 10px 0;
        }

        #comment {
            color: gray;
            margin-left: 7px;
        }

        #rating {
            font-size: 0;
        }

        #rating a {
            margin: 0 1px;
        }
    </style>
    <script>
        window.onload = function () {
            var oRating = document.getElementById('rating');
            var aA = oRating.getElementsByTagName('a');
            var oComment = document.getElementById('comment');
            var arrImg = ['http://fantaghiro.github.io/miaov/JS_Basic_Lessons/7-img/nst.gif', 'http://fantaghiro.github.io/miaov/JS_Basic_Lessons/7-img/nsg.gif', 'http://fantaghiro.github.io/miaov/JS_Basic_Lessons/7-img/sth.gif', 'http://fantaghiro.github.io/miaov/JS_Basic_Lessons/7-img/st.gif'];
            var lastArrImg = [];
            var lastComment = '　　';
            var num = 0;

            //switch判断
            function rating(index, imgSrc) {
                // 移入当前a包括前面的一起选中
                for (var i = 0; i <= index; i++) {
                    aA[i].getElementsByTagName('img')[0].src = imgSrc; //每个i的第一个img
                }
                switch (index) { //表达式index（通常是一个变量）的值会与结构中的每个 case 的值做比较
                    case 0:
                        oComment.innerHTML = '极差';
                        break; //使用 break 来阻止代码自动地向下一个 case 运行
                    case 1:
                        oComment.innerHTML = '很差';
                        break;
                    case 2:
                        oComment.innerHTML = '还行';
                        break;
                    case 3:
                        oComment.innerHTML = '不错';
                        break;
                    case 4:
                        oComment.innerHTML = '推荐';
                }
            }

            for (var i = 0; i < aA.length; i++) {
                aA[i].index = i;

                // 鼠标移入
                aA[i].onmouseover = function () {
                    num = this.index;
                    for (var i = 0; i < aA.length; i++) {
                        lastArrImg[i] = aA[i].getElementsByTagName('img')[0].src;
                    }
                    // 初始化
                    rating(aA.length - 1, arrImg[0]);
                    // 判断num小于2显示图片1，否则显示图片2
                    if (num < 2) {
                        rating(num, arrImg[1]);
                    } else {
                        rating(num, arrImg[2]);
                    }
                }
                // 鼠标移出
                aA[i].onmouseout = function () {
                    for (var i = 0; i < aA.length; i++) {
                        aA[i].getElementsByTagName('img')[0].src = lastArrImg[i];
                    }
                    oComment.innerHTML = lastComment;
                }
                // 点击
                aA[i].onclick = function () {
                    num = this.index;
                    // 初始化
                    rating(aA.length - 1, arrImg[0]);
                    // 判断num小于2显示图片1，否则显示图片3
                    if (num < 2) {
                        rating(num, arrImg[1]);
                    } else {
                        rating(num, arrImg[3]);
                    }

                    for (var i = 0; i < aA.length; i++) {
                        lastArrImg[i] = aA[i].getElementsByTagName('img')[0].src;
                    }
                    lastComment = oComment.innerHTML;
                }
            }
        }
    </script>
</head>

<body>
    <p>
        我的评价：
        <span id="rating">
            <a href="javascript:"><img src="img/st.gif" alt=""></a>
            <a href="javascript:"><img src="img/st.gif" alt=""></a>
            <a href="javascript:"><img src="img/st.gif" alt=""></a>
            <a href="javascript:"><img src="img/st.gif" alt=""></a>
            <a href="javascript:"><img src="img/st.gif" alt=""></a>
        </span>
        <span id="comment">推荐</span>
    </p>
</body>

</html>

问题出现的环境背景及自己尝试过哪些方法

你期待的结果是什么？实际看到的错误信息又是什么？

javascript html css

html5

阅读 2k

2 个回答

易函123

✓ 已被采纳

// 鼠标移入
                aA[i].onmouseover = function () {
                    num = this.index;
                    for (var i = 0; i < aA.length; i++) {
                        lastArrImg[i] = aA[i].getElementsByTagName('img')[0].src;
                    }
                    // 初始化
                    rating(aA.length - 1, arrImg[0]);
                    // 判断num小于2显示图片1，否则显示图片2
                    if (num < 2) {
                        rating(num, arrImg[1]);
                    } else {
                        rating(num, arrImg[2]);
                    }
                }

这里鼠标移入的时候获取了移入的元素下标num = this.index;

然后执行

function rating(index, imgSrc) {
                // 移入当前a包括前面的一起选中
                for (var i = 0; i <= index; i++) {
                    aA[i].getElementsByTagName('img')[0].src = imgSrc; //每个i的第一个img
                }
                switch (index) { //表达式index（通常是一个变量）的值会与结构中的每个 case 的值做比较
                    case 0:
                        oComment.innerHTML = '极差';
                        break; //使用 break 来阻止代码自动地向下一个 case 运行
                    case 1:
                        oComment.innerHTML = '很差';
                        break;
                    case 2:
                        oComment.innerHTML = '还行';
                        break;
                    case 3:
                        oComment.innerHTML = '不错';
                        break;
                    case 4:
                        oComment.innerHTML = '推荐';
                }
            }

让前面的星星选中

后面点击了后。

 // 点击
                aA[i].onclick = function () {
                    num = this.index;
                    // 初始化
                    rating(aA.length - 1, arrImg[0]);
                    // 判断num小于2显示图片1，否则显示图片3
                    if (num < 2) {
                        rating(num, arrImg[1]);
                    } else {
                        rating(num, arrImg[3]);
                    }

                    for (var i = 0; i < aA.length; i++) {
                        lastArrImg[i] = aA[i].getElementsByTagName('img')[0].src;
                    }
                    lastComment = oComment.innerHTML;
                }

执行lastArrImg[i] = aA[i].getElementsByTagName('img')[0].src;把img的src写入了代码里
所以点击完移除出不会发生改变

Jane_Shen

629118

发布于
2019-03-13

百度文库 viewcommon.js 里：

initStar: function() {
    var t = this
      , e = null
      , n = i(this.el).find("span.tip")
      , o = this.$starEl.find(".value-star");
    o.each(function(o, r) {
        var a = i(r);
        a.hover(function() {
            e && clearTimeout(e),
            n.hide(),
            !t.commentStar && t.setStar(o + 1)
        }, function() {
            !t.commentStar && (e = setTimeout(function() {
                t.setStar(0)
            }, 50))
        }),
        a.click(function() {
            t.commentStar || (t.commentStar = o + 1,
            s.starChange({
                changed: {
                    star: t.commentStar
                }
            }),
            t.setStar(t.commentStar))
        })
    })
},
setStar: function(t) {
    var e = this.$starEl.find(".value-star")
      , n = this.$starEl.siblings(".f-star");
    e.each(function(e, n) {
        t > e ? i(n).removeClass("ic-star-off").addClass("ic-star-on") : i(n).addClass("ic-star-off").removeClass("ic-star-on")
    }),
    n.html(u[t])
},
resetStar: function() {
    this.commentStar = 0,
    this.setStar(0)
},

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

请大佬指点，我不是很理解这个星星评分是怎么选中当前和前面的星星的，还有点击了星星移出如何保持点击状态不被移出状态清除。

问题出现的环境背景及自己尝试过哪些方法

相关代码

你期待的结果是什么？实际看到的错误信息又是什么？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？