jquery - 在键盘按下时隐藏和显示所有 div

Question

我不是 jquery 最有经验的人，所以我来到这里希望得到答案。我遇到的问题是如何在单击键盘按钮时隐藏网页上的所有 div。

我知道隐藏和显示 div 的基本代码是：

$(document).ready(function() {
    $("div").hide();  
    $("div").show();
});

我不知道是否有一种更简单的方法来隐藏网页上的每个 div 而不是只有一百个 $("div").hide();语句。我也不确定如何监视键盘上的点击，然后隐藏和显示各种 div。

谢谢！

Answer 1

最简单的是，您需要监听keypress事件（或keyup多个keydown事件），如果使用特定键响应该事件：

$(document).keypress(function(e){
    var key = e.which;
    if (key == 116) {
        // if the user pressed 't' (for 'toggle'):
        $('div').toggle();
    }
});

简单的 JS Fiddle 演示。

参考：

• keypress().
• toggle().

Answer 2

识别按下哪个字母的简单方法

$(document).keypress( function( e ) {
   var key = String.fromCharCode( e.which );
   switch( key ) {
      case 'A':
          $('div').hide();
      break;

      case 'S':
          $('div').show();
      break;
   }
});

Answer 3

当你这样做时：

$("div").hide();

您正在隐藏页面上的所有 div。您正在使用的选择器是 div 标签，因此所有带有标签“div”的元素都将被选中，并且将对其应用 hide()。所以你已经隐藏并显示了页面上的所有 div。

要在按下特定键时显示它们，并在按下另一个键时隐藏它们，您可以执行以下操作。这将在按下 a 或 A 时显示 div，当按下 b 或 B 时隐藏它们。

$(document).onkeypress(function(e)){
   if (e.which == 97 || e.which == 65){
       $("div").show();
   }else if (e.which == 98 || e.which == 66){
       $("div").hide();
   }
 });

Answer 4

$(document).keypress(function(e) {
    $("div").hide();  
    $("div").show();
});

考虑到@nomad 的评论：

如果您想在特定键上触发某些东西，您可以使用Javascript Key Codes

例如。

$(document).keypress(function(e) {
    if(e.which == 26) {
        alert('You pressed shift key');           
    }        
});