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>