jQueryはいくつかのボタンクリックイベントを処理しません。

Question

jQueryを使用して簡単なテキストベースのゲームを作成しようとしています。いくつかの場所があり、ボタンを押すことで移動できます（対応するHTML divの表示/非表示）。私は場所「Arena」に移動して「House」に自由に戻ることができますが、場所「Shop」からどこにでも戻ることはできませんが、コードはわかりました。

フィドル：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>