How can I apply the (.fill) class to each child element when hovering over them individually?
I tried writing this code in TypeScript and added a mouseenter event, but upon opening the file, the .fill class is already applied to all elements. Why is this happening?
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>
Compiled 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();