2021-06-27 五星好评的实现

实现效果

鼠标移入到对应的选项li,当前li以及之前的星星显示高亮,下方出现对应等级的评价,移出时恢复原样;
点击星星评价时,下方评价固定到右边(下方的消失,右边的出现)

思路

0.设置解释语
1.点击:<p>隐藏,取出解释语并赋给<span>的文本内容,保存点击分数,调用打分
2.移入:<p>显示,取出解释语并赋给<p>的文本内容,设置p标签的位置,调用打分
3.移出:<p>隐藏,调用打分
4.打分:小于当前索引的就添加

代码

html

<div id="star">
    <span>点击星星就能打分</span>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
    <span></span>
    <p>选择解释</p>
</div>

css

body {color: #666;font: 12px/2 Arial;}
#star {margin: 10px auto;width: 800px;position: relative;/*设置定位给p标签参考*/}
ul {list-style-type: none;margin: 0px 10px;/*必须设置外边距才能上去*/}
ul,span {float: left;}
ul li {float: left;background: url('./star.png') no-repeat;text-indent: -9999px;width: 24px;margin: 0px;}
#star li.on {background-position: 0 -28px;}
/*后面要根据鼠标变动,更改p,所以要设置定位*/
p {position: absolute;top: 20px;width: 200px;display: none;}
p em {color: #f60;}
strong {color: #f60;padding-left: 20px;}

js

class Star {
    msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
    //保存打分
    setScore = 0;
    constructor() {
            //获取节点
            this.ulObj = this.getEle("ul");
            this.lisObj = this.ulObj.children;
            this.spanObj = this.ulObj.nextElementSibling;
            this.pObj = this.getEle("p");
            //给li绑定事件
            this.bingEve();
        }
        //给li绑定事件
    bingEve() {
            Array.from(this.lisObj).forEach((ele, k) => {//伪数组lisObj转化为真数组
                ele.addEventListener("click", this.clickFn.bind(this, k));
                ele.addEventListener("mouseout", this.outFn.bind(this, k));
                ele.addEventListener("mouseover", this.overFn.bind(this, k));
            });
        }
        //点击事件的回调函数
    clickFn(key) {
            //隐藏p标签
            this.pObj.style.display = "none";
            //取出解释语
            let msg = this.msg[key].split("|");
            //显示解释语到span标签中
            this.spanObj.innerHTML = "<strong>" + msg[0] + "</strong>" + msg[1];
            //保存点击的分数
            this.setScore = key + 1;
            //调用打分:高亮lightStar
            this.lightStar(this.setScore);
        }
        //移入事件的回调函数
    overFn(key) { //key是li对应的索引
            //取出解释语,将字符串转化为数组
            let msg = this.msg[key].split("|");
            //显示p
            this.pObj.style.display = "block";
            this.pObj.innerHTML = "<em><strong>" + msg[0] + "</strong></em>" + msg[1];
            //设置p的基础位置和实时移动位置
            let ulW = this.ulObj.offsetLeft;
            let liW = this.lisObj[0].offsetWidth;
            //p的left=li的宽度*li的索引+ul的offsetLeft
            this.pObj.style.left = liW * key + ulW + 'px';
            // 调用打分
            this.lightStar(key + 1);

        }
        //移出事件的回调函数
    outFn(key) {
            //高亮消失
            this.lightStar(this.setScore);
            // p标签消失
            this.pObj.style.display = "none";
        }
        //星星设置高亮显示:小于当前索引值的都高亮显示
    lightStar(index) {
            Array.from(this.lisObj).forEach((v, k) => {
                //小于当前索引的添加
                k < index && (v.className = "on");
                k >= index && (v.className = "");
            })
        }
        //获取节点的方法
    getEle(tag, one = true) {
        //单个节点对象
        if (one) return document.querySelector(tag);
        //多个节点对象
        return document.querySelectorAll(tag);
    }
}
new Star();

效果

文件