javascript - jQuery 不处理 -some- 按钮点击事件

Question

我正在尝试使用 jQuery 制作一个简单的基于文本的游戏。有一些位置，玩家可以通过按下按钮移动到那里(简单地显示/隐藏相应的 HTML div)。虽然我可以自由移动到位置“Arena”并返回位置“House”，但我无法从位置“Shop”返回任何地方，但代码对我来说看起来不错。

fiddle :https://jsfiddle.net/qyg5twoL/

 $(document).ready(function(){
	var loc="house";

	$('#house').css('display','');
	$('#shop').css('display','none');
	$('#arena').css('display','none');

	$('#gt-arena').click(function(){
		loc='arena';
		$('#arena').css('display','');
		$('#shop').css('display','none');
		$('#house').css('display','none');
	});

	$('#gt-house').click(function(){
		alert('house');
		loc='house';
		$('#house').css('display','');
		$('#shop').css('display','none');
		$('#arena').css('display','none');
	});

	$('#gt-shop').click(function(){
		alert('shop');
		loc='shop';
		$('#house').css('display','none');
		$('#shop').css('display','');
		$('#arena').css('display','none');
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>jquery problem</title>

<div id="house">
	<h1>Your house</h1>
	<p>This is your house</p>
	<button id="gt-arena">Go to Arena</button>
	<button id="gt-shop">Go to Shop</button>
</div>

<div id="arena">
	<h1>Arena</h1>
	<p>This is the Arena</p>
	<button id="fight">Fight</button>
	<button id="gt-house">Leave Arena</button>
	<button id="gt-shop">Go to Shop</button>
</div>

<div id="shop">
	<h1>Shop</h1>
	<p>For all your shopping needs</p>
	<button id="buy-knife">Buy knife</button>
	<button id="gt-arena">Go to Arena</button>
	<button id="gt-house">Go to House</button>
</div>

Answer 1

问题陈述

问题在于 id 选择器。您已将相同的 id 分配给多个元素。 id是元素的标识，应该是唯一的。当为多个元素添加时，事件仅与 1 个元素绑定(bind)，而忽略其他元素。这就是为什么一旦导航到 house 就无法返回。

解决方案

代替 id 使用 class 选择器。

 $(document).ready(function() {
   var loc = "house";

   $('#house').css('display', '');
   $('#shop').css('display', 'none');
   $('#arena').css('display', 'none');

   $('.gt-arena').click(function() {
     loc = 'arena';
     $('#arena').css('display', '');
     $('#shop').css('display', 'none');
     $('#house').css('display', 'none');
   });

   $('.gt-house').click(function() {
     alert('house');
     loc = 'house';
     $('#house').css('display', '');
     $('#shop').css('display', 'none');
     $('#arena').css('display', 'none');
   });

   $('.gt-shop').click(function() {
     alert('shop');
     loc = 'shop';
     $('#house').css('display', 'none');
     $('#shop').css('display', '');
     $('#arena').css('display', 'none');
   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>jquery problem</title>

<div id="house">
  <h1>Your house</h1>
  <p>This is your house</p>
  <button class="gt-arena">Go to Arena</button>
  <button class="gt-shop">Go to Shop</button>
</div>

<div id="arena">
  <h1>Arena</h1>
  <p>This is the Arena</p>
  <button id="fight">Fight</button>
  <button class="gt-house">Leave Arena</button>
  <button class="gt-shop">Go to Shop</button>
</div>

<div id="shop">
  <h1>Shop</h1>
  <p>For all your shopping needs</p>
  <button id="buy-knife">Buy knife</button>
  <button class="gt-arena">Go to Arena</button>
  <button class="gt-house">Go to House</button>
</div>