我已经构建了一个游戏，我想知道是否可以使用按钮重置游戏。我已经创建了游戏并将按钮内置到 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>最佳答案
删除是/否类，如下所示，并清空包含有关赢得比赛的信息的 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>关于javascript - 使用没有表单的 jquery 按钮重置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51639933/