javascript - JQuery hide() 在 show() 之后不起作用，反之亦然

Question

有人提出了这个问题的各种变体，但似乎大多数都是使用 toggle() 方法解决的。我的场景有所不同，hide() 和 show() 应该由两个不同的事件驱动，即创建新游戏和赢得游戏。我不希望每个事件只做一件事，因此 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

您应该使用括号(调用函数):

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

性能提示(当然，如果可能的话 - 元素在 DOM 中可以是唯一的):

如果你用哈希声明你的“.winner”会更好。例如:<div id="winner"/>并在分隔符 jQuery 中使用:$("#winner")