Frage von thxxdolo, 30

Presskey Funktion und Regelerstellung mit jQuery?

Zur Zeit lerne ich die Web-Programmierungssprache jQuery und teste mich grade selber aus was ich damit erreichen kann. Hier kommt mein problem ich sozusagen eine Buch Seiten so einbinden das ich sie Per Tastatur Kilck rumblättern kann. Doch das ist schwieriger als ich mir dachte. Ich zeige mal was ich bereits geschafft habe: jquery:

  $("#2").keydown(function (e) {
                if (e.keyCode == 37)
                {
                    $('#1').click();
                } else if (e.keyCode == 39)
                {
                    $('#3').click();
                }
            });
            
            $("#1").keydown(function (e) {
                if (e.keyCode == 37)
                {
                    $('#1').click();
                } else if (e.keyCode == 39)
                {
                    $('#2').click();
                }
            });
            
            $("#3").keydown(function (e) {
                if (e.keyCode == 37)
                {
                    $('#2').click();
                } else if (e.keyCode == 39)
                {
                    $('#4').click();
                }
            });

Body:

<body>
    <button id="1">Seite 1</button>
    <button id="2">Seite 2</button>
    <button id="3">Seite 3</button>
    <button id="4">Seite 4</button>

    <img id="test1"/>
</body>

Eingentlich läuft alles super aber um den sag ich mal von seite 1 auf drei zu kommen kann ich nur auf Seite 2 (button) klicken und dann mit der rechten Tastatur klick auf Seite 3 gelangen.

Wie erstelle ich eine Regel das nach einen Event direkt zum nächsten Event gesprungen wird?

Danke im vorraus

Antwort
von Sarkophator, 18

Erstmal lernst du nicht die "Web-Programmiersprache" jQuery sondern, wenn überhaupt, die JavaScript-Bibliothek jQuery. Aber das mal bei Seite.

Dein Problem liegt darin, dass du die Events für die anderen Buttons erst bindest, wenn das Keydown-Event auf dem Button für die zweite Seite ausgeführt wird. Das heißt also, du musst das Binden der Events auslagern.

Am besten versuchst du allerdings deinen Code so umzustrukturieren, dass du nur ein Event benötigst, dass du auf alle Buttons gleichzeitig bindest, d.h. dass du die Seitenzahl für die entsprechende Richtung dann auf anderem Wege dir holst.

Hier eine schnelle Demo:

https://jsfiddle.net/nj4bx3ez/

Außerdem dürfen IDs nicht nur aus Zahlen bestehen/dürfen nicht mit Zahlen anfangen, das solltest du also auch ändern.

Kommentar von thxxdolo ,

Erstmal danke für die Hilfreiche Antwort,

Nach einigen Stunden probieren hab ich gemerkt das man anscheinend nicht keine Bilder im Event einsetzen kann.

Gibt es darfür eine Lösung? Wenn möglich ohne die Seite Neuzuladen (wäre dann wieder zu einfach) ?

Kommentar von Sarkophator ,

Weiß ehrlich gesagt nicht genau was du mit "Bilder im Event einsetzen" meinst? Und wäre sicher auch gut dann zu wissen, wie du das denn bereits probiert hast.

Keine passende Antwort gefunden?

Fragen Sie die Community