Question

我试图制作这款甜甜圈点击游戏，它应该与cookie点击器相似。当您从商店中选择商品时，应弹出确认以确认您要购买商品。我在下面的代码中更容易点击。（你可能想让代码全屏显示）我的问题是，为什么连续多次出现确认弹出窗口？在我的代码中，当您点击该项目时，只有一个确认，所以我真的不知道是什么导致它。

＆＃13;

$(document).ready(function() {
	tacoClick();
});
function tacoClick() {
	//hide the items
	$(".item").hide();
	
	//defining some store items
  var clickBonus1 = {
		price: 6,
		amount: 25,
	};
	var clickBonus2 = {
		price: 75,
		amount: 10,
	};
	var clickBonus5 = {
		price: 150,
		amount: 5,
	};
	var autoClick = {
		price: 500,
		amount: 1,
	};
	var autoBonus1 = {
		price: 700,
		amount: 10,
	};
	var autoBonus2 = {
		price: 1000,
		amount: 10,
	};
	var autoBonus5 = {
		price: 1200,
		amount: 5,
	};
	var laser = {
		price: 2500,
		amount: 1,
	};
	var battery = {
		price: 1500,
		amount: 666,
	};
	var energyPotion = {
		price: 1500,
		amount: 20,
	};
	var key = {
		price: 500000,
		amount: 1,
	};
	
	//defining the player
	var player = {
		clicks: 0,
		money: 5,
		energy: 100,
		items: ["none"],
		clickAmount: 1,
		energyLost: 0.5,
		waitTime: 600000,
	};

	//clicking! YAY :)
	$("#donut").click(function() {
		//adding num clicks, money, and taking away energy
		player.clicks += player.clickAmount;
		player.energy -= player.energyLost;
		player.money += player.clickAmount / 10;

		//showing player status on the status bar
  	document.getElementById("clickNum").innerHTML = player.clicks;
	  document.getElementById("playerEnergy").innerHTML = Math.floor(player.energy);
		document.getElementById("money").innerHTML = Math.floor(player.money);
		
		//tired mode
		if(player.energy < 1 && player.energy > -1) {
			alert("You ran out of energy! You'll have to wait ten more minutes until you can play again!");
			$("body").fadeOut();
			window.setTimeout(function revive() {
				$("body").fadeIn();
				player.energy = 100;
			}, player.waitTime);
		}
		
		//the items! now, it gets really tricky...
  	if(player.money > 6) {
	  	$("#clickBonus1").show();
			$("#clickBonus1").click(function() {
				var confirmBuy = confirm("Do you want to buy this item for $50?");
				if(confirmBuy) {
					if(player.money > 6) {
						player.clickAmount += 1;
						player.money -=2;
						document.getElementById("money").innerHTML = Math.floor(player.money);
					} else {
						alert("You don't have enough money!");
					}
				}			
			});
  	}
	});
}

＆＃13;

* {
	font-family: Arial;
	font-weight: bold;
}

#donut {
	height: 500px;
	width: 500px;
	/*background-color: grey;*/
	border-radius: 500px;
}

#donut:hover {
	cursor: pointer;
	width: 505px;
	height: 505px;
	transition: ease 0.3s;
}

body {
	/*border: 1px solid black;*/
	width: 960px;
	text-align: center;
	margin-left: 480px;
	margin-top: 200px;
}

.item:hover {
  cursor: pointer;
	background-color: #EAFFEA;
	transition: ease 0.5s;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
	<script>
	  
	</script>
	<style>
		
	</style>
</head>
<body>
<div id="statusBarWrapper">
  <div id="clickNumWrapper">Total clicks: <span id="clickNum">0</span></div>
	<div id="devicesWrapper">Items: <span id="devices">none</span></div>
	<div id="energyWrapper">Energy: <span id="playerEnergy">100</span></div>
	<div id="moneyWrapper">Money: $<span id="money">5</span></div>
</div>
<div id="tacoWrapper">
	<img id="donut" src="http://cliparts.co/cliparts/LTd/jRj/LTdjRjKpc.png"/>
</div>
<div id="shopWrapper">
  <ul id="shop">
		<div class="item" id="clickBonus1">Click bonus (+1 donut / click) <br/> Price: $50</div>
		<div class="item" id="clickBonus2">Click bonus (+2 donut / click) <br/> Price: $75</div>
		<div class="item" id="clickBonus5">Click bonus (+5 donut / click) <br/> Price: $150</div>
		<div class="item" id="autoClick">Auto Click (automatically +1 / second) <br/>  Price: 500</div>
		<div class="item" id="autoBonus1">Auto Click bonus (+1 donut / second) <br/> Price: $700</div>
		<div class="item" id="autoBonus2">Auto Click bonus (+2 donut / second) <br/> Price: $1000</div>
		<div class="item" id="autoBonus5">Auto Click bonus (+5 donut / click) <br/> Price: $1200</div>
		<div class="item" id="laser">Laser (+50 donut / second) <br/> Price: $2500</div>
		<li class="item" id="battery">Battery (powers laser for 2 minutes) <br/> Price: $1500</div>
		<div class="item" id="energyPotion">Energy Potion (shortens waiting time by 30 seconds) <br/> Price: $2500</div>
		<div class="item" id="key">??????</div>
	</ul>
</div>
</body>
</html>

＆＃13;

Answer 1

代码可能会使用一些重构，但话虽如此，我想我知道可能会发生什么。您将点击处理程序绑定到#donut。每次单击#donut时，都会调用该处理程序。每次调用时，处理程序都会将单击处理程序绑定到＃clickBonus1。因此，如果多次调用#donut click处理程序，则会向＃clickBonus1应用多个处理程序，当单击＃clickBonus1时将会调用所有处理程序，从而导致多个警报。

为什么同时会出现多个警报？

1 个答案: