Kann ich beim zweiten Mal, wenn ein Ereignis ausgelöst wird, einen anderen Code ausführen?

Question

Ich versuche, ein Menü zu entwickeln, das von den Pfeiltasten navigiert werden kann und habe einige Schwierigkeiten, herauszufinden, wo ich vom ersten Ereignisauslöser, der das erste Element "hervorhebt", gehen kann. Wenn Sie meine Geige auschecken, werden Sie feststellen, dass das erste Element so hervorgehoben ist, wie es sollte, wenn die rechte Pfeiltaste gedrückt wird (denken Sie daran, in den Körperteil der Geige zu klicken!), Aber ich bin mir nicht sicher, wo ich hingehen soll dort, damit nachfolgende Tastendrücke alle Elemente durchlaufen.

$(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>

Irgendwelche Tipps und Feedback sind willkommen, auch wenn es den Code in eine ganz andere Richtung nimmt!

Answer 1

Sie sollten alle Richtung Schlüsselereignisse wie der Griff folgende:

$(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

Einige Flagge benötigt

$(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

Wenn Pfeil gedrückt wird Sie aktuell aktive Menüpunkt überprüfen , entferne seine hervorgehobenen Stile und füge sie zum nächsten Element hinzu.

So:

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

Probieren Sie es https://jsfiddle.net/1kf34rdq/11/