Wie knnen Sie die Tasten next und prev machen, um durch eine Liste zu navigieren und ihre Funktionen auszulösen?

Question

Ich habe ein kleines Problem, das ich nicht herausfinden kann, wie es geht. Ich habe eine Liste. Durch Klicken auf jedes Listenelement werden das Hintergrundbild und ein Text in einem Div geändert. Aber ich würde auch gerne eine nächste/vorherige Tasten für die einfache Navigation haben. Diese Schaltflächen next und prev würden den Hintergrund und das Textfeld entsprechend ändern. Wie würde man das machen?

Dies ändert sich das Hintergrundbild:

<script type="text/javascript"> 
var backImage = [ 
'img/img.jpg', 
'img/img2.jpg', 
'img/img3.jpg', 

]; 

function changeBGImage(evt, id){ 
var el = evt.target || evt.srcElement; 
var ul = el.parentNode; 
var lis = ul.getElementsByTagName('li'); 

for (var i=0, iLen=lis.length; i<iLen; i++) { 
    if (lis[i] == el) { 
     document.body.background = backImage[i]; 
     } 
    } 
} 

</script> 

und dies ändert den Text in der (<div id="fred"></div>) Box

<script type="text/javascript"> 

var MessAry = [ 
'text1', 
'text2', 
'text3', 
]; 

function CngMess(evt, id) { 
var el = evt.target || evt.srcElement; 
var ul = el.parentNode; 
var lis = ul.getElementsByTagName('li'); 

for (var i=0, iLen=lis.length; i<iLen; i++) { 
    if (lis[i] == el) { 
    document.getElementById(id).innerHTML = MessAry[i]; 
     } 
    } 
    } 
</script> 

dann habe ich dies in html. Durch Klicken auf diese Listenelemente werden der Text und der Hintergrund geändert.

<ul onclick="CngMess(event, 'fred'); changeBGImage(event);"> 
    <li>listitem1</li> 
    <li>listitem2</li><br> 
    <li>listitem3</li><br> 
</ul> 

Ich habe eine Live-Website hier: http://heikkilotvonen.fi/

Gäbe es eine einfache Möglichkeit, eine prev next Tasten für diese Einstellung zu implementieren? Kann jemand helfen?

Danke!

Answer 1

Im Allgemeinen würde ich eine solche Situation behandeln, indem ich einen "Zeiger" auf das aktive Element halte. Zum Beispiel könnten Sie das DOM-Element, das dem aktiven Listenelement entspricht, in einer Javascript-Variablen speichern. Wenn Sie dann auf Zurück und Vorwärts klicken, können Sie zu den benachbarten Geschwistern Ihres Listenelements navigieren.

Alternativ können Sie einfach eine Integer-ID speichern. Angenommen, Ihre html sah aus wie:

<li id="listItem_0" myCustomAttr="0">Stuff 1</li> 
<li id="listItem_1" myCustomAttr="1">Stuff 2</li> 
..... 

Dann Sie den Wert Ihres benutzerdefinierten Attributs speichern könnte, und dann verketten (n-1) oder (n + 1) zu 'listItem_' und machen einen document.getElementById() um das nächste Element zu finden und die gleiche Aktion auszuführen, als wäre es angeklickt worden.

Zusammenfassend gibt es viele Möglichkeiten, dies zu tun, aber sie werden sich wahrscheinlich darum kümmern, den aktuellen Gegenstand direkt oder indirekt in einer Art Javascript-Variable zu verfolgen.