使用沒有表單的jquery按鈕重置
[英]Reset with jquery button that does not have a form
問題描述
我已經構建了一個游戲，我想知道是否可以通過按鈕重置游戲。 我已經創建了游戲，並將按鈕內置到javascript中，並設置了功能，但是我不確定哪個功能會重置整個游戲板。 我嘗試使用$（“：reset”）並將其交替使用var win和grid.item，但是它不起作用。 我應該如何重置網格和var win？
var win = parseInt(Math.random() * 9) + 1 var i = 1; $('.grid-item').each(function() { $(this).data('slot', i++); }); $('.grid-item').click(function() { if ($(this).data('slot') == win) { $(this).addClass('yes'); $("H3").append("<H3>Congrats, You have won!</H3>"); } else { $(this).addClass('no'); } }); $('button').click(function() { });
.grid { display: inline-block; border: 5px solid black; padding: 5px; background-color: white; } .grid-item { float: left; width: 70px; height: 70px; background-color: grey; margin: 1px; } .grid-item.no { background-image: url(https://s22.postimg.cc/yo9soxxz5/kisspng-computer-icons-x-mark-check-mark-clip-art-red-x-5ac2fb83.png); background-size: 60px 60px; background-repeat: no-repeat; background-position: center; } .grid-item.yes { background-image: url(http://icons.iconarchive.com/icons/papirus-team/papirus-apps/512/emerald-theme-manager-icon-icon.png); background-size: 60px 60px; background-repeat: no-repeat; background-position: center; } H3 { color: green; } button { background-color: grey; border: 2px solid black; color: black; font-size: 16px; padding: 5px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hidden Gem!</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <H1>Hidden Gem Game!</H1><br/> <div class='grid'> <div class='grid-item'></div> <div class='grid-item'></div> <div class='grid-item'></div><br/> <div class='grid-item'></div> <div class='grid-item'></div> <div class='grid-item'></div><br/> <div class='grid-item'></div> <div class='grid-item'></div> <div class='grid-item'></div> </div> <H3></H3> <br/> <H2>Click on the boxes to find the hidden gem.</H2> <button type="button">Play Again</button> <script src="js/index.js"></script> </body> </html>
2 個解決方案
解決方案1
0 2018-08-01 18:26:06
您應該刪除所有的yes/no類，並生成新的win號碼，最后清除h3元素文本，例如：
var win = parseInt(Math.random() * 9) + 1; var i = 1; $('.grid-item').each(function() { $(this).data('slot', i++); }); $('.grid-item').click(function() { if ($(this).data('slot') == win) { $(this).addClass('yes'); $("H3").append("<H3>Congrats, You have won!</H3>"); } else { $(this).addClass('no'); } }); $('button').click(function() { $('.grid-item').each(function() { win = parseInt(Math.random() * 9) + 1; $(this).removeClass('no yes'); $("H3").html(''); }); });
.grid { display: inline-block; border: 5px solid black; padding: 5px; background-color: white; } .grid-item { float: left; width: 70px; height: 70px; background-color: grey; margin: 1px; } .grid-item.no { background-image: url(https://s22.postimg.cc/yo9soxxz5/kisspng-computer-icons-x-mark-check-mark-clip-art-red-x-5ac2fb83.png); background-size: 60px 60px; background-repeat: no-repeat; background-position: center; } .grid-item.yes { background-image: url(http://icons.iconarchive.com/icons/papirus-team/papirus-apps/512/emerald-theme-manager-icon-icon.png); background-size: 60px 60px; background-repeat: no-repeat; background-position: center; } H3 { color: green; } button { background-color: grey; border: 2px solid black; color: black; font-size: 16px; padding: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <H1>Hidden Gem Game!</H1><br/> <div class='grid'> <div class='grid-item'></div> <div class='grid-item'></div> <div class='grid-item'></div><br/> <div class='grid-item'></div> <div class='grid-item'></div> <div class='grid-item'></div><br/> <div class='grid-item'></div> <div class='grid-item'></div> <div class='grid-item'></div> </div> <H3></H3> <br/> <H2>Click on the boxes to find the hidden gem.</H2> <button type="button">Play Again</button>
解決方案2
0 2018-08-01 18:29:12
刪除如下所示的是/否類，並清空h3標簽，其中包含有關贏得游戲的信息。
$('#restbtn').click( function() {
$(".grid .grid-item").removeClass("no yes")
$("H3").html("");
});
var win = parseInt(Math.random() * 9) + 1 var i = 1; $('.grid-item').each(function() { $(this).data('slot', i++); }); $('.grid-item').click(function() { if ($(this).data('slot') == win) { $(this).addClass('yes'); $("H3").append("<H3>Congrats, You have won!</H3>"); } else { $(this).addClass('no'); } }); $('#restbtn').click(function() { $(".grid .grid-item").removeClass("no yes") $("H3").html(""); });
.grid { display: inline-block; border: 5px solid black; padding: 5px; background-color: white; } .grid-item { float: left; width: 70px; height: 70px; background-color: grey; margin: 1px; } .grid-item.no { background-image: url(https://s22.postimg.cc/yo9soxxz5/kisspng-computer-icons-x-mark-check-mark-clip-art-red-x-5ac2fb83.png); background-size: 60px 60px; background-repeat: no-repeat; background-position: center; } .grid-item.yes { background-image: url(http://icons.iconarchive.com/icons/papirus-team/papirus-apps/512/emerald-theme-manager-icon-icon.png); background-size: 60px 60px; background-repeat: no-repeat; background-position: center; } H3 { color: green; } button { background-color: grey; border: 2px solid black; color: black; font-size: 16px; padding: 5px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hidden Gem!</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <H1>Hidden Gem Game!</H1><br/> <div class='grid'> <div class='grid-item'></div> <div class='grid-item'></div> <div class='grid-item'></div><br/> <div class='grid-item'></div> <div class='grid-item'></div> <div class='grid-item'></div><br/> <div class='grid-item'></div> <div class='grid-item'></div> <div class='grid-item'></div> </div> <H3></H3> <br/> <H2>Click on the boxes to find the hidden gem.</H2> <button type="button" id="restbtn">Play Again</button> <script src="js/index.js"></script> </body> </html>
jQuery按鈕重置為正常形式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.