javascript - 我想要一个 OOP 解决方案，当我单击 div 时会发生某些事情

Question

我只是想让这段代码 OOP js

document.querySelectorAll('.yahtzee_die').forEach(function(e) {
    e.addEventListener('click', function() {
        if (e.classList.contains('clicked')) {
            e.classList.remove('clicked');
        }
        else if(document.querySelectorAll('.clicked').length < 4) {
            e.classList.add('clicked');
        }
    });
});

这就是我累了

const yahtzee_die = document.querySelectorAll("yahtzee_die");

class Dicee{
    selected(element){
        if (element.classList.contains('clicked')) {
            element.classList.remove('clicked');
        }
        else if(document.querySelectorAll('.clicked').length < 4) {
            element.classList.add('clicked');
        }
    }    
}


let controller = new Dicee();
yahtzee_die.forEach(dice => {
    dice.addEventListener('click', () => {
        controller.selected(dice);
    });
});

它没有给我错误，但它不像第一个代码那样执行。我想知道为什么！

标签： javascriptarraysclassoop