Question

我对这一切都很陌生，所以我可能会问一些可能无法完成的事情。我有一个页面有两个div，但一次只显示一个div。显示第一个div时，第二个div将被隐藏，直到单击一个按钮。此时，第一个div被隐藏，第二个div显示。

我想要发生的是，除了点击交替div的按钮之外，我还希望特定按键来执行相同操作。例如，如果当前显示第一个div，则用户可以单击该按钮或按F键以显示另一个视图。这甚至可能吗？有没有更好的方法呢？

感谢您的帮助！

Answer 1

您可以将keypress事件处理程序绑定到元素以检查按键。按键事件最初会转到具有焦点的元素，但它们会冒出DOM树，因此您可能希望将事件绑定到文档元素。

以下检查＆＃39; F＆＃39;键，忽略是否按下shift键：

$(document).keypress(function(e) {
    if (e.which == 70 || e.which == 102) {
        // Toggle the divs here.
    }
});

jsfiddle

Answer 2

这应该做你想要的。你需要将它绑定到某个东西。

var code = e.keyCode || e.which;
if(code == 70) { 
    //alternate divs
}

您可以在CSS-Tricks

获取完整的关键代码列表

Answer 3

使用jQuery

HTML：

<body onkeypress="myFunction(event)">
    <button onclick="myFunction(event)">Click me</button>
    <div id="1st">Hello</div>
    <div id="2nd">Goodbye</div>
</body>

JS：

<script>
$(document).ready(function () {
    $("#2nd").hide();
});

function myFunction(e) {
    if( e.type == 'click' || (e.keyCode==70 || e.keyCode==102) )
    {
        $("#1st").hide();
        $("#2nd").show();
    }
}

</script>

JSFiddle：https://jsfiddle.net/8bt8au57/

Answer 4

我想您正在寻找$.toggle函数，根据已经包含该类的对象添加或删除一个类？

使用jquery执行此操作的示例如下，它将自身注册到按钮的click事件和文档keypress事件，然后触发toggleDivs（）函数，该函数只占用文档中的所有元素css类框并切换隐藏的类。

function toggleDivs() {
  $('.box').each(function() {
    $(this).toggle(250);
  });
}

$(function() {
  // everything should be there
  $('#btnToggle').on('click', toggleDivs);
  $(document).on('keypress', function(e) {
    if ((e.key && e.key.toLowerCase() === 'f') ||
      (e.keyCode || e.which) === 70) {
      toggleDivs();
    }
  });
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="box">
  <p>Div 1</p>
</div>
<div id="div2" class="box hidden">
  <p>Div 2</p>
</div>
<button type="button" id="btnToggle">Toggle divs</button>

仅显示div上的EventHandlers

4 个答案: