jQuery 使用键盘键在两个功能之间切换

Question

我正在尝试 execute/alternate 在键盘上按同一个键两次的两个功能，但在第一次按下后我没有得到任何其他东西。我需要盒子在第一次按下时打开，然后在第二次按下时关闭。

我需要实现这个：

第一个框 -> F1 键 (open/close);

第二个框 -> F2 键 (open/close);

第三个框->F3键(open/close);

open/close动作只是为了解释目的，它实际上会做的是执行一点function()

这是我的代码（我从 here 得到了 jquery ）

<div class="time one">
<p>You can see this if you click F1</p>
</div>

<div class="time two">
<p>You can see this if you click F2</p>
</div>

<div class="time three">
<p>You can see this if you click F3</p>
</div>


$(document).keydown(function(e) {
    switch(e.which) {

    case 112: // F1 on keyboard

    function a(el){
        $(el).animate({width: "260px"}, 1500); 
    }
    function b(el){
        $(el).animate({width: "30px"}, 1500);
    }
    var el = $('.one');
    return (el.tog^=1) ? a(el) : b(el);
    break;
    case 113: // F2 on keyboard

    function a(el){
        $(el).animate({width: "260px"}, 1500); 
    }
    function b(el){
        $(el).animate({width: "30px"}, 1500);
    }
    var el = $('.two');
    return (el.tog^=1) ? a(el) : b(el);
    break;
    case 114: // F3 on keyboard

    function a(el){
        $(el).animate({width: "260px"}, 1500); 
    }
    function b(el){
        $(el).animate({width: "30px"}, 1500);
    }
    var el = $('.three');
    return (el.tog^=1) ? a(el) : b(el);
    break;

    default: return; // exit this handler for other keys
    }
  e.preventDefault(); // prevent the default action
});

当我第一次按 F1 时，它起作用了，但之后什么也没有发生。有人可以帮忙吗？ JSFiddle is here

Answer 1

一种可能的解决方案 http://jsfiddle.net/ex3gckhk/12/

$(function(){
    var F1 = 112;
    var F2 = 113;
    
    function toggleWidth ($element) {
        if ($element.hasClass('extended')) {
            $element.animate({width: "30px"}, 1500);
            $element.removeClass('extended');
        } else {
            $element.animate({width: "260px"}, 1500);
            $element.addClass('extended');
        }
    }
    
    $(document).keyup(function(e) {
        e.preventDefault();
        
        var $element = null;
        
        switch (e.which) {
            case F1: $element = $('.one');
                break;
            case F2: $element = $('.two');
                break;
            default: break;
        }
        
        if ($element) {
            toggleWidth($element);
        }
    });
});

<div class="time one">
    <p>You can see this if you click</p>
</div>
  
<div class="time two">
    <p>You can see this if you click</p>
</div>
 
<div class="time three">
    <p>You can see this if you click</p>
</div>

Answer 2

您的代码总是执行函数 a，因为每次按下键时您都重新声明变量 el，因此 (el.tog^=1) 将始终是相同的值。

您需要在 keydown 事件之外声明 el 变量：

    var el = $('.one');
    $(document).keyup(function(e) {
        switch(e.which) {

            case 13: // F1 on keyboard
                function a(el){
                    $(el).animate({width: "260px"}, 1500);
                }
                function b(el){
                    $(el).animate({width: "30px"}, 1500);
                }
                var rez = (el.tog^=1) ? a(el) : b(el);
                return rez;

            default: return; // exit this handler for other keys
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });

jQuery 使用键盘键在两个功能之间切换

jQuery alternate between two functions using keyboard key

keyboard

jquery

function

keydown

toggle