Question

目前我正在使用PHP和JavaScript的组合开发纸牌游戏应用程序。但是我遇到了事件处理的问题。我想要的功能是让玩家能够点击卡片，然后会显示一条消息，指示再次点击该卡片将其翻转过来。这是我的基本设置：

function flipPlayerCard($card) {
    gameAlert('Click the card again if you would like to flip it.');
    $compareCard = $card;
    $('body').off().on('click', '.card', function() {
        if ($compareCard.attr('id') == $(this).attr('id')) {
                    console.log('Flipping card');
            //Call the flip player card function
        }
        else {
            gameAlert('');
            resetBinds();
        }
    });
}
function resetBinds() {
    $('body').off().find('.player').eq(turn).find('.card').add('.draw_pile .card').add('.discard_pile .card').on('click', function(event) {
        event.stopPropagation();
        cardSwitch($(this));
    });
}
function cardSwitch($this) {
    $('body').off();
    var type = $this.parent().parent().attr('class');
    switch (type) {
        case 'player':
            flipPlayerCard($this);
            break;
        case 'discard_pile':
            takeDiscardPileCard();
            break;
        case 'draw_pile':
            flipDrawPileCard();
            break;
    }
}
$(document).ready(function() {
    resetBinds();
});

在第一次单击时它可以正常工作，但在第二次单击时，没有任何内容记录到控制台。我知道必须有更好的方法来处理这样的链式事件。我错过了什么？任何帮助表示赞赏。

Answer 1

更简单的可能是

function flipPlayerCard( card ) {

    if ( card.hasClass('clicked') ) {
       // code to flip the card
       card.removeClass('clicked');
    } else {
       $('.clicked').removeClass('clicked'); // if clicked on new one, clear old
       card.addClass('clicked');
       gameAlert('Click the card again if you would like to flip it.');
    }
}

这样您就不需要重置事件绑定

构造JQuery事件处理的正确方法

1 个答案: