星级Eventhandler

Question

当我在元素之外单击时，如何更改星级并将其设为默认值？

另外，例如，如果我点击第四颗星，我的前4颗星是红色的，但如果我再次点击第二颗星，我应该只会得到第一和第二颗红色，第三和第四颗之前的蓝色。

let stars=document.querySelector(".hearts").children;

for(let i = 0; i<stars.length; i++){
    stars[i].onmouseover =  funcion;
    stars[i].onmouseout = funcionn;
    stars[i].addEventListener('click', funcio3);



    function funcion (){
        for(let j= 0; j<=i; j++){
            stars[j].classList.remove('fa-heart');
            stars[j].classList.add('fa-w-16');
        }
    };

    function funcionn (){
        for(let j= 0; j<=i; j++){
            stars[j].classList.remove('fa-w-16');
            stars[j].classList.add('fa-heart');
        }

    };

    function funcio3 (){
        for(let j= 0; j<=i; j++){
            stars[j].style.color = 'red';
        }

    };




};

Answer 1

• 要捕获您需要侦听文档上的单击事件的元素外部的单击，并检查目标是否不是开始。

​

document.addEventListener('click', evt => {
    if (!evt.target.closest('.hearts')) {
        // click has been fired outside .hearts children
    }
});

​

• 在你的'funcio3‘中，你需要先重置所有开始的颜色，然后才能添加红色。