Puis-je exécuter un ensemble de code différent la deuxième fois qu'un événement est déclenché?

Question

J'essaie de développer un menu qui peut être parcouru à partir des touches fléchées et j'ai du mal à trouver où aller du déclencheur d'événement initial qui "met en évidence" le premier élément. Si vous découvrez mon violon, vous constaterez que le premier élément est mis en évidence comme il se doit lorsque vous appuyez sur la touche fléchée droite (n'oubliez pas de cliquer dans la section corps du violon!), Mais je ne sais pas trop où aller là-bas, de sorte que les presses suivantes feront défiler tous les éléments.

$(document).ready(function($) { 
 
    $("body").keydown(function(event) { 
 
    if (event.which == 39) { 
 
     $(".a").css({ 
 
     "outline": "3px solid red" 
 
     }); 
 
    } 
 
    }); 
 
});

.tile { 
 
    width: 100px; 
 
    height: 100px; 
 
    outline: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tile a"> 
 
    A 
 
</div> 
 
<div class="tile b"> 
 
    B 
 
</div> 
 
<div class="tile c"> 
 
    C 
 
</div>

Tous les conseils et les commentaires sont appréciés, même si elle prend le code dans une direction complètement différente!

Answer 1

Vous devriez gérer toutes les directions des événements clés comme ce qui suit:

$(document).ready(function($) { 
 
    var activeIndex = -1; 
 

 
    $(".tile").hover(
 
    function() { 
 
     $(this).css({ 
 
     "outline": "3px solid red" 
 
     }); 
 
    }, 
 
    function() { 
 
     $(this).css({ 
 
     "outline": "1px solid red" 
 
     }); 
 
    } 
 
); 
 

 
    $("body").keydown(function(event) { 
 
    if (event.which == 39) { 
 
     activeIndex = 0; 
 
    } else if (event.which == 38 && activeIndex != -1) { 
 
     activeIndex--; 
 
    } else if (event.which == 40 && activeIndex != -1) { 
 
     activeIndex++; 
 
    } 
 

 
    if (activeIndex < 0) { 
 
     activeIndex = 0; 
 
    } else if (activeIndex == $("#menu-container").children(".tile").length) { 
 
     activeIndex = $("#menu-container").children(".tile").length - 1; 
 
    } 
 

 
    if (activeIndex != -1) { 
 
     $("#menu-container").children(".tile").css({ 
 
     "outline": "1px solid red" 
 
     }); 
 
     $("#menu-container").children(".tile").eq(activeIndex).css({ 
 
     "outline": "3px solid red" 
 
     }); 
 
    } 
 
    }); 
 
});

.tile { 
 
    width: 100px; 
 
    height: 100px; 
 
    outline: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu-container"> 
 
    <div class="tile a"> 
 
    A 
 
    </div> 
 
    <div class="tile b"> 
 
    B 
 
    </div> 
 
    <div class="tile c"> 
 
    C 
 
    </div> 
 
</div>

Answer 2

Certains drapeau nécessaires

$(document).ready(function($) { 
    var arrowPressed = false; 
    $("body").keydown(function(event){ 
     if (event.which == 39) { 
     if(!arrowPressed) { 
      $(".a").css({"outline":"3px solid red"}); 
      arrowPressed = true; 
     } 
     else { 
      $(".a").css({"outline":"none"}); 
      arrowPressed = false; 
     } 
     } 
    }); 
}); 

Answer 3

Lorsque la flèche est pressé, vous pouvez vérifier pour l'élément de menu actif , supprime ses styles surlignés et les ajoute à l'élément suivant.

Comme ceci:

if (event.which == 39) { 
    var active_title = $('.tile.active'); 
    active_title.removeClass('active'); 
    if (active_title.length && active_title.next().length) { 
     active_title.next().addClass('active'); 
    } else { 
     $('.a').addClass('active'); 
    } 
    } 

Essayez-le https://jsfiddle.net/1kf34rdq/11/