使用没有表单的jquery按钮重置

时间：2018-08-01 18:21:55

标签： javascript jquery html css

我已经制作了一个游戏，我想知道是否可以通过按钮重置游戏。我已经创建了游戏，并将按钮内置到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 个答案:

答案 0 :(得分：0)

您应该删除所有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>

答案 1 :(得分：0)

删除如下所示的是/否类，并清空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>

相关问题
最新问题