使用没有表单的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.