Question

我想为每个孩子添加一个类（.fill类），当我将鼠标悬停在每个孩子身上时

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

<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>

HTML

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();

编译js：

{{1}}

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]))

    }
}

Answer 2

你不能像这样使用addEventListener，该函数将被执行..

这将有效：

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);

        }
    }
    fill(e){
        e.target.classList.add("fill");
    }
}

let a   =  new Rate()

当mouseenter事件发生时，逐个添加类

2 个答案: