javascript - mouseenter事件时一一添加类

Question

当我将鼠标悬停在每个 child 上时，我想为每个 child 添加一个类(.fill 类)

我在 typescript 中编写了这段代码，并添加了 mouseenter 事件，但是当我打开文件时，.fill 类已经应用于所有这些事件，为什么？

class Rate {
    private stars : any ;

    constructor(){
        this.init()
    }

    init(){
        this.stars = document.querySelectorAll("#rating div");
        for (let i = 0; i < this.stars.length; i++){
            this.stars[i].setAttribute('count', i);
            this.stars[i].addEventListener("mouseenter",this.fill(this.stars[i]))

        }
    }
    fill(elm){
        elm.classList.add("fill")
    }
}

let a   =  new Rate()

html

<div id="rating" class="rating">
<div ><i class="ion-android-star"></i></div>
<div ><i class="ion-android-star"></i></div>
<div ><i class="ion-android-star"></i></div>
<div ><i class="ion-android-star"></i></div>
<div ><i class="ion-android-star"></i></div>
</div>

编译后的js:

var Rate = /** @class */ (function () {
    function Rate() {
        this.init();
    }
    Rate.prototype.init = function () {
        this.stars = document.querySelectorAll("#rating div");
        for (var i = 0; i < this.stars.length; i++) {
            this.stars[i].setAttribute('count', i);
            this.stars[i].addEventListener("mouseenter", this.fill(this.stars[i]));
        }
    };
    Rate.prototype.fill = function (elm) {
        elm.classList.add("fill");
    };
    return Rate;
}());
var a = new Rate();

Answer 1

您需要传递一个执行该操作的函数，现在您可以在 init 函数中立即执行填充。最简单的方法是使用箭头函数。

init(){
    this.stars = document.querySelectorAll("#rating div");
    for (let i = 0; i < this.stars.length; i++){
        this.stars[i].setAttribute('count', i);
        this.stars[i].addEventListener("mouseenter", () => this.fill(this.stars[i]))

    }
}