Question

我正在写一个基本的记忆游戏，你翻转2张卡片，如果它们不匹配，它们会翻转，但是如果它们与背景颜色变化匹配。我想要的是一个按钮，可以随时将游戏重置回所有空白卡，无论是在游戏中还是在游戏结束时。

以下是代码：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<!-- <link href="style.css" rel="stylesheet"> -->
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: futura;
}
h2 {
    text-align: center;
}
ul {
    width: 428px;
    margin: 0 auto;
    padding: 0;
}
ul li {
    float: left;
    width: 100px;
    border: 1px solid #444;
    list-style: none;
    padding: 70px 0;
    margin: 0 5px 5px 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 1em;
}
ul li:hover {
    border: 1px solid red;
}
ul li.flipped {
    color: #444;
}
.clearfix {
clear: both;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>

<h2>Click two different cards to see if they match!</h2>
<ul>
    <li>salmon</li>
    <li>swordfish</li>
    <li>swordfish</li>
    <li>shrimp</li>
    <li>lobster</li>
    <li>scallops</li>
    <li>lobster</li>
    <li>salmon</li>
    <li>tuna</li>
    <li>scallops</li>
    <li>tuna</li>
    <li>shrimp</li>
</ul>

<div class="clearfix"></div>
<p><button type="reset" value="Reset">Reset</button></p>

<script type="text/javascript">

$(function() {
    var firstCard = null;

    $('li').on('click', function(e) {
        e.preventDefault();

        $(this).addClass('flipped');

        if (firstCard === null) {
            firstCard = $(this);
        } else {
            if (firstCard.text() === $(this).text()) {
                firstCard = null;
            } else {
                var secondCard = this;

                setTimeout(function() {
                    firstCard.removeClass('flipped');
                    $(secondCard).removeClass('flipped');

                    firstCard = null;
                }, 1000);
            }
        }
    });
});
</script>
</body>
</html>

Answer 1

根据您的问题，您需要删除所有flipped类：

$('.flipped').removeClass('flipped');

Answer 2

将此添加到您的确认功能：

firstCard.css({backgroundColor: 'green'});
$(this).css({backgroundColor: 'green'});

并重置：

$('#reset').on('click', function(){
        $('li').removeClass('flipped').removeAttr('style');
    });

查看我的fiddle

jQuery - 让重置按钮工作

2 个答案: