javascript - 卡片记忆/匹配游戏：添加和删除类后丢失点击处理程序

问题描述

好的，这是我在 Stack 上的第一篇文章。这是我的问题。我正处于为我在 Udacity 的最后一个项目创建卡片匹配记忆游戏的早期阶段。我点击一张卡片，卡片中添加了“打开”和“显示”类。添加了另一个类“inactivated”，以使用设置为“无”的 css 指针事件停用点击处理程序（因此无法点击两次卡片）。我点击第二张卡片，同样的顺序发生了。在这一点上没有问题。我现在只担心没有比赛。如果没有匹配，则删除“open”、“show”和“inactivate”类。那时，我似乎可以点击牌组中的任何一张牌，但是当我点击一张牌时，什么也没有发生。任何帮助是极大的赞赏。

小提琴在这里：https ://jsfiddle.net/SteveAB/buvt42ke/1/

// event listeners

classname = document.getElementsByClassName('card');

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', displayCard);
    classname[i].addEventListener('click', checkMatch);

};

  displayCard = function() {

        if ((guessOne !== 0) && (guessTwo <= 1)) {

            // alert('GuessOne is ' + guessOne);

            this.classList.toggle('open');
            this.classList.toggle('show');
            this.classList.toggle('inactivated');

        }

        if (guessTwo === 1) {

            // alert('GuessTwo is ' + guessTwo);

        inactivate();

        }

        guessTwo++;

    };



 checkMatch = function() {

        openCards.push(this);
        let len = openCards.length;

        if (len === 2) {

            //alert("move counter - two clicks is a move");

                if (openCards[0].id === openCards[1].id) {

                    alert("calling Match function");

                    match();

                } else {

                    //alert("calling notMatch function");

                    notMatch();
                };

            };

        };
 function inactivate() {

        Array.prototype.filter.call(cards, (function (card) {

            if (card.classList.contains('inactivated')) {

                return;

            } else {

                card.classList.add('inactivated');

                // console.log(card);
            }

        }));
    };

    function reactivate() {

        Array.prototype.filter.call(cards, (function (card) {

            if (card.classList.contains('match')) {
                return;

            } else {

            card.classList.remove('inactivated');           

            }

        }));
    };

 function notMatch() {

        setTimeout(function(){
            openCards[0].classList.remove('open', 'show');
            openCards[1].classList.remove('open', 'show');
            openCards = [];
            reactivate();            

        }, 1800);



    };

标签： javascript

问题是，guessOne永远guessTwo不会被重置。如果您将该行添加console.log(guessOne, guessTwo到顶部displayCard并在单击时观看控制台，您将看到：

javascript - 卡片记忆/匹配游戏：添加和删除类后丢失点击处理程序

问题描述

解决方案

推荐阅读