JQuery hide（）がshow（）の後に動作しない、またはその逆の場合

Question

この質問のバリエーションが尋ねられましたが、ほとんどがtoggle()メソッドを使用して解決されたようです。私のシナリオは、hide()とshow()が2つの異なるイベント、新しいゲームの作成、そしてゲームが勝利したときに駆動されるべきである点で異なります。私は各イベントが1つのことしかしたくないので、toggle()は適切ではないでしょう。

私はsocket.ioを使用してサーバーとブラウザを通信しています。すべてが適切に読み込まれて開始されます。問題は、前の試合が勝利した後に新しい試合を開始しようとすることにあります。関連するJavaScriptは次のようになります。

$(document).ready(function() { 
    socket.on('gameOver', function() { 
     $('.yourStatus').hide(700); 
     $('.winner').show(700); 
    }); 
    $('button.newGame').on('click', function() { 
     $('.winner').hide; 
     $('.yourStatus').show; 
    }); 
}); 

ゲームがsocket.ioイベントで終了すると、すべてが正常に動作します。 hide()とshow()を除いて、ボタンクリックイベント機能内の他のすべてが正しく機能します。

私は確かにこれに対する答えは恥ずかしいほど簡単です。

Answer 1

あなたは括弧（関数を呼び出し）を使用する必要があります（それが可能であれば讲义1コースの - 要素がDOMに一意である可能性）

$(document).ready(function() { 
    socket.on('gameOver', function() { 
     $('.yourStatus').hide(700); 
     $('.winner').show(700); 
    }); 
    $('button.newGame').on('click', function() { 
     $('.winner').hide(); 
     $('.yourStatus').show(); 
    }); 
}); 

パフォーマンスのヒントを：あなたを宣言した場合

より良いです.winner 'とハッシュ。例：<div id="winner"/>とセパレータjQueryで使用：$("#winner")