javaScript：使用面向对象实现五星好评（如果不是用的箭头函数，需注意this指向）

本文链接：https://blog.csdn.net/Tian_R/article/details/120170460

这篇博客介绍了如何使用HTML、CSS和JavaScript创建一个星评系统。通过CSS设置背景图片和位置，JavaScript处理鼠标悬停、点击和离开事件，动态改变星星的选中状态并显示对应的评价文字。文章特别提到了在不同上下文中JavaScript函数中this的指向问题。

摘要由CSDN通过智能技术生成

效果图：

html:

<div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div></div>
    </div>

注意：由于是使用背景图() ,所以需注意路径是否正确

css:

 <style type="text/css">
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            width: 300px;
            height: 28px;
        }

        ul li {
            float: left;
            background: url(star.gif) no-repeat 0 0;
            width: 27px;
            height: 28px;
        }
    </style>

js:

<script>
    class Fn {
        constructor(a) {
            var box = document.getElementById(a);
            this.ul = box.children[0];
            this.div = box.children[1];
            this.ulis = this.ul.children;
            this.index = -1;
            this.overS()
            this.clickS()
            this.outS()
        }

        overS() {
            for (let i = 0; i < this.ulis.length; i++) {
                this.ulis[i].onmouseover = () => {
                    this.fn(i)
                }
            }
        }

        clickS(){
            for (let i = 0; i < this.ulis.length; i++) {
                this.ulis[i].onclick = ()=>{
                    this.index = i
                }
            }
        }

        outS(){
            this.ul.onmouseout = ()=>{
                this.fn(this.index)
            }
        }

        fn(num) {
            var arr = ['差评', '不推荐', '一般', '推荐', '强力推荐'];
            for (let j = 0; j <= num; j++) {
                this.ulis[j].style.backgroundPosition = '0px -27px';
            }
            for (let i = num + 1; i < this.ulis.length; i++) {
                this.ulis[i].style.backgroundPosition = '0 0';
            }
            this.div.innerHTML = arr[num] ? arr[num] : '';
        }
    }
    var p = new Fn('box')

</script>

this指向问题：

作为普通函数调用:this指向 window；

作为事件处理函数调用：this指向事件源；

作为定时函数调用：this指向 window；

作为自执行函数调用：this指向 window；

作为对象的方法调用：this指向对象；

需注意：箭头函数里面没有this

箭头函数的this是上下文的this

箭头函数不会改变this的指向