问题
目前，如果您选择一行中的一个方 block ，然后取消选择它，然后单击该行中剩余的 4 个方 block ，您仍然会收到“宾果!”因为计数器只是计算点击的方 block 数。
- 所以，我想知道如何更改它，以便取消选择一个方 block 将从计数器中减去 1。
- 点击“再次播放”按钮
.again会将计数器重置为 0。
固定 JSFIDDLE 链接: http://jsfiddle.net/tygqfhpq/
脚本.js
$(function() {
// Set winning combinations to array
var winners = [
['a1','a2','a3','a4','a5'],
['b1','b2','b3','b4','b5'],
['c1','c2','c3','c4','c5'],
['d1','d2','d3','d4','d5'],
['e1','e2','e3','e4','e5'],
['a1','b1','c1','d1','e1'],
['a2','b2','c2','d2','e2'],
['a3','b3','c3','d3','e3'],
['a4','b4','c4','d4','e4'],
['a5','b5','c5','d5','e5'],
['a1','b2','c3','d4','e5'],
['a5','b4','c3','d2','e1']
];
var possibleWinners = winners.length;
// Initialize selected array with c3 freebie
var selected = ['c3'];
// Play again, removes all previously clicked
$('.again').click(function(){
$('.square').removeClass('clicked');
$('.square').css("pointer-events", "auto");
$('h1').html("WHL Playoffs Bingo");
selected = ['c3'];
var counter = 0;
});
// Toggle clicked and not clicked
$('.square').click(function(){
$(this).toggleClass('clicked');
// Push clicked object ID to 'selected' array
selected.push($(this).attr('id'));
// Compare winners array to selected array for matches
for(var i = 0; i < possibleWinners; i++) {
var cellExists = 0;
for(var j = 0; j < 5; j++) {
if($.inArray(winners[i][j], selected) > -1) {
cellExists++;
}
}
// If all 5 winner cells exist in selected array alert success message
if(cellExists === 5) {
$('h1').html("Bingo!");
$('.square').css("pointer-events", "none");
}
}
});
// Count the number of squares clicked
$('.square').data('clicked', 0)
.click(function(){
var counter = $(this).data('clicked');
$(this).data('clicked', counter ++);
console.log(counter);
})
});
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Election Bingo</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/print.css" media="print">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
</head>
<body>
<canvas id="canvas"></canvas>
<h1>WHL Playoffs Bingo</h1>
<p class="teaser">Brandon Wheat Kings to face off against Kelowna Rockets in the finals</p>
<div class="buttons">
<button class="print" onclick="window.print()">Print</button>
<button class="again">Play again</button>
</div><!-- /.buttons -->
<div class="bingo">
<div class="row">
<div class="square" id="a1"><p>Hat trick</p></div>
<div class="square" id="b1"><p>Wheat Kings awarded a penalty shot</p></div>
<div class="square" id="c1"><p>Home team gets on the board first</p></div>
<div class="square" id="d1"><p>The game goes to OT</p></div>
<div class="square" id="e1"><p>One-timer</p></div>
</div>
<div class="row">
<div class="square" id="a2"><p>Puck hits the pipes</p></div>
<div class="square" id="b2"><p>Empty net goal</p></div>
<div class="square" id="c2"><p>Players drop the gloves</p></div>
<div class="square" id="d2"><p>Papirny gets a shutout</p></div>
<div class="square" id="e2"><p>Kelowna comes from three down to steal the game</p></div>
</div>
<div class="row">
<div class="square" id="a3"><p>Fans pack a sold-out Keystone Centre</p></div>
<div class="square" id="b3"><p>Tyson Baillie saves the day for Kelowna</p></div>
<!-- <div class="logo"><p>Logo</p></div> -->
<img src="assets/img/sun.jpeg" alt="" class="logo">
<div class="square" id="d3"><p>Peter and John Quenneville set each other up</p></div>
<div class="square" id="e3"><p>“Breakfast goal” worthy numbers against Rockets</p></div>
</div>
<div class="row">
<div class="square" id="a4"><p>Wheat Kings' NHL draft prospects score</p></div>
<div class="square" id="b4"><p>Wheat Kings kill a power play</p></div>
<div class="square" id="c4"><p>Players hug it out after scoring a goal</p></div>
<div class="square" id="d4"><p>Five hole to score</p></div>
<div class="square" id="e4"><p>Short-handed goal</p></div>
</div>
<div class="row">
<div class="square" id="a5"><p>Scoreless after one</p></div>
<div class="square" id="b5"><p>One of the Wheat Kings four rookies score</p></div>
<div class="square" id="c5"><p>Tim McGauley scores</p></div>
<div class="square" id="d5"><p>Kelowna’s Rourke Chartier adds to his goal total</p></div>
<div class="square" id="e5"><p>Papirny makes an “impossible” save</p></div>
</div>
</div><!-- /.bingo -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
最佳答案
我修改了你的点击函数:
$('.square').click(function(){
// Toggle the "clicked" class for the item
$(this).toggleClass('clicked');
// If toggleClass added the class (ie: selected the square)
// we need to add it to the "selected" array
if($(this).hasClass("clicked"))
{
selected.push($(this).attr('id'));
}
// If toggleClass removed the class (ie: deselected the square)
// we need to remove this item's id from the "selected" array
else
{
// we get the position of $(this) item's 'id' that was previously pushed into the array
var idx = selected.indexOf($(this).attr('id'));
// we then remove it from the selected array with splice.
selected.splice(idx,1);
}
// ... remainder of code
}
基本上，您在单击项目时将项目的 id 添加到单击的数组中，但如果取消选择，则不会将其删除。
关于javascript - 宾果游戏，麻烦减去，重置计数器跟踪方 block 点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30061850/