jQuery不处理 - 一些按钮点击事件

Question

我想使用jQuery制作一个简单的基于文本的游戏。有些地方，玩家可以通过按下按钮来移动（简单地显示/隐藏相应的HTML div）。虽然我可以自由地移动到位置“竞技场”并返回“位置”位置，但我无法从任何地点的“商店”位置返回，但代码对我来说确实很合适。

小提琴：https://jsfiddle.net/qyg5twoL/

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

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

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

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

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

 
});

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

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

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

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

Answer 1

问题陈述

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

解决方案

代替ID使用类选择的。

$(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>

Answer 2

这是因为你有一个以上的相同的ID。 id对于DOM中的每个元素都应该是唯一的。

下面的代码应该适合你。

希望它可以帮助

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

 
\t $('.content').css('display','none'); 
 
\t $('#house').css('display',''); 
 

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

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

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

 

 
});

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

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

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

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