jQuery alterne entre deux fonctions en utilisant la touche du clavier

Question

J'essaie d'exécuter/d'alterner deux fonctions en appuyant sur la même touche deux fois sur le clavier, mais après le premier clavier, je ne reçois rien d'autre. J'ai besoin de la boîte pour ouvrir lorsque la touche est pressée la première fois, et qu'elle devrait être fermée lorsque la touche est pressée la deuxième fois.

J'ai besoin pour y parvenir:

Première boîte -> touche F1 (ouverture/fermeture);

Deuxième boîte -> Touche F2 (ouvrir/fermer);

Troisième boîte -> Touche F3 (ouvrir/fermer);

L'action d'ouverture/fermeture est uniquement à des fins d'explication, ce qu'il fait faire est d'exécuter un litte function()

Voici mon code (je suis le jquery de here)

<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 
}); 

Lorsque Je presse F1 la première fois que cela fonctionne, mais que rien ne se passe plus. Quelqu'un peut-il aider? JSFiddle is here

Answer 1

Une solution possible 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

Votre code exécute toujours fonction d'un parce que vous redéclarant la variable el chaque fois que la touche est pressée, alors (el.tog^= 1) sera toujours la même valeur.

Vous devez déclarer la variable el en dehors de l'événement keydown:

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) 
    });