JQuery fokusera till nästa element

Permalänk

JQuery fokusera till nästa element

Någon som vet hur man fokuserar till ett element som ligger i en annan div med hjälp av piltangenterna?
Just nu så kan jag bara fokusera på olika element som ligger i samma div men vill kunna fortsätta att skapa fokus på nästa element som ligger i en annan div.

Nu så fungerar det att navigera med piltangenterna upp och ner mellan länk 1-3. Men hur går jag för att komma till länk 4-6 med hjälp av piltangenterna?

HTML

<div> <a class="arrowNavigation'">Länk1</a> <a class="arrowNavigation'">Länk2</a> <a class="arrowNavigation'">Länk3</a> </div> <div> <a class="arrowNavigation'">Länk4</a> <a class="arrowNavigation'">Länk5</a> <a class="arrowNavigation'">Länk6</a> </div>

JQuery

function downArrowPressed() { $('.arrowNavigation').keydown(function (e) { if (e.keyCode == 40) { $(this).next().focus(); } }); } function upArrowPressed() { $('.arrowNavigation').keydown(function (e) { if (e.keyCode == 38) { $(this).prev().focus(); } }); } document.onkeydown = function (evt) { evt = evt || window.event; switch (evt.keyCode) { case 40: downArrowPressed(); break; case 38: upArrowPressed(); break; } };

Visa signatur

CPU: AMD Ryzen 7 7800X3D
Ram: Kingston 32GB DDR5 6000MHz
GPU: XFX Radeon RX 6800 XT MERC 319
Operativsystem: Windows 11
Skärm: Acer 27" Nitro XV272UP QHD IPS 144 Hz

Permalänk
Medlem
Skrivet av PeterMagnuss0n:

Någon som vet hur man fokuserar till ett element som ligger i en annan div med hjälp av piltangenterna?
Just nu så kan jag bara fokusera på olika element som ligger i samma div men vill kunna fortsätta att skapa fokus på nästa element som ligger i en annan div.

Nu så fungerar det att navigera med piltangenterna upp och ner mellan länk 1-3. Men hur går jag för att komma till länk 4-6 med hjälp av piltangenterna?

HTML

<div> <a class="arrowNavigation'">Länk1</a> <a class="arrowNavigation'">Länk2</a> <a class="arrowNavigation'">Länk3</a> </div> <div> <a class="arrowNavigation'">Länk4</a> <a class="arrowNavigation'">Länk5</a> <a class="arrowNavigation'">Länk6</a> </div>

JQuery

function downArrowPressed() { $('.arrowNavigation').keydown(function (e) { if (e.keyCode == 40) { $(this).next().focus(); } }); } function upArrowPressed() { $('.arrowNavigation').keydown(function (e) { if (e.keyCode == 38) { $(this).prev().focus(); } }); } document.onkeydown = function (evt) { evt = evt || window.event; switch (evt.keyCode) { case 40: downArrowPressed(); break; case 38: upArrowPressed(); break; } };

Det är ganska mycket som inte fungerar och som är märkligt gjort här. Du har bland annat tre stycken knapplyssnare, du behöver bara en. Uttrycken gör ju samma sak. Mycket extra kod! Jag får inte din kod att fungera.

Vad ska hända om ingen får fokus?

.next() tar nästa sibling från samma parent. Det går att köra siblings() för att få alla men då tar den inte hänsyn till den ursprungliga.
Tror det måste lösas med en generell selektor för alla man är intresserade av att traversera.

https://jsfiddle.net/L8zpdet7/

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Permalänk
Skrivet av Leedow:

Det är ganska mycket som inte fungerar och som är märkligt gjort här. Du har bland annat tre stycken knapplyssnare, du behöver bara en. Uttrycken gör ju samma sak. Mycket extra kod! Jag får inte din kod att fungera.

Vad ska hända om ingen får fokus?

.next() tar nästa sibling från samma parent. Det går att köra siblings() för att få alla men då tar den inte hänsyn till den ursprungliga.
Tror det måste lösas med en generell selektor för alla man är intresserade av att traversera.

https://jsfiddle.net/L8zpdet7/

Tack för hjälpen och att du tog din tid!
Har dock lite svårt att förstå vad din mod function gör för något är det något som du kan förklara lite mer?
Anledningen till att min kod inte fungerade är förmodligen på grund av </br> taggarna som du har i din kod, tar man bort dom så blir resultatet annorlunda.

Kan man på något sätt undvika att en dropdown lista inte byter värde så fort man använder piltangenterna för att byta fokus?
https://jsfiddle.net/7fynmufh/5/

Visa signatur

CPU: AMD Ryzen 7 7800X3D
Ram: Kingston 32GB DDR5 6000MHz
GPU: XFX Radeon RX 6800 XT MERC 319
Operativsystem: Windows 11
Skärm: Acer 27" Nitro XV272UP QHD IPS 144 Hz

Permalänk
Medlem
Skrivet av PeterMagnuss0n:

Tack för hjälpen och att du tog din tid!
Har dock lite svårt att förstå vad din mod function gör för något är det något som du kan förklara lite mer?
Anledningen till att min kod inte fungerade är förmodligen på grund av </br> taggarna som du har i din kod, tar man bort dom så blir resultatet annorlunda.

Kan man på något sätt undvika att en dropdown lista inte byter värde så fort man använder piltangenterna för att byta fokus?
https://jsfiddle.net/7fynmufh/5/

mod-funktionen är en variant av den "vanliga" mod-funktionen i Javascript. Problemet är att Javascript kan returnera negativa tal för deras modulusfunktion vilket i detta fall inte är önskvärt.

Ex i Javascript:

-1 % 6 = -1 1 % 6 = 1

I exempelvis C# och många andra språk + mod() funktionen

-1 % 6 = 5 1 % 6 = 1

Det finns andra sätt att skriva det på men denna är ganska vedertagen. Som du ser är det ett helt annat resultat.

Det finns flera olika former av att stoppa event i jQuery.
Ett exempel är att köra stopPropagation() eller exempelvis preventDefault() där den sistnämnda stoppar standardeventet vilket i sin tur dödar eventet på dropdownlistan.

Personligen så hade jag inte lagt för mycket tid på denna pilnavigeringsfunktionalitet utan sett till att göra navigeringen trevlig i övrigt.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?