jQuery - 獲取重置按鈕的工作

我正在寫一個基本的記憶遊戲，你翻轉2張牌，如果他們不匹配，他們翻轉過來，但如果他們匹配他們的背景顏色的變化。我想要的是一個按鈕，可以在任何時候將遊戲重置爲所有空白卡，無論是在遊戲過程中還是在遊戲結束時。jQuery - 獲取重置按鈕的工作

下面的代碼：根據您的問題

<!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>

來源

2014-02-07 bealstreetmedia

問題是什麼？ –

我搞砸了標題;問題是如何讓按鈕重置卡片。對於那個很抱歉。 – bealstreetmedia

這聽起來像你只是需要刪除所有flipped類：

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

來源

2014-02-07 20:20:06 helion3

添加到您的確認功能：

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

並供您重置：

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

看我fiddle

來源

2014-02-07 20:23:11 kingkode

jQuery - 獲取重置按鈕的工作

回答

相關問題