如何使下一個和上一個按鈕在列表中導航並觸發其功能？

Question

我有一個小問題，我不知道該怎么辦。 我有一個清單。 單擊每個列表項將更改背景圖像和div中的文本。 但我也想有一個下一個/上一個按鈕，以便於導航。 這些下一個和上一個按鈕將相應地更改背景和文本框。 一個人怎么做？

這將更改背景圖像：

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

這會更改（ <div id="fred"></div> ）框中的文本

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

那么我在html中有這個。 單擊這些列表項將更改文本和背景。

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

我在這里有一個實時網站： http : //heikkilotvonen.fi/

是否有一種簡單的方法來實現此設置的上一個下一個按鈕？ 有人可以幫忙嗎？

謝謝！

Answer 1

通常，我將通過為活動元素保留“指針”來處理這種情況。 例如，您可以將與活動列表項相對應的DOM元素存儲在javascript變量中。 然后，單擊后退和前進時，您可以導航到列表項的相鄰兄弟姐妹。

另外，您可以簡單地存儲一個整數id。 假設您的html看起來像：

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

然后，您可以存儲自定義屬性的值，然后將（n-1）或（n + 1）連接到'listItem_'並執行document.getElementById（）來查找下一個要使用的元素，並使用與單擊該操作相同的操作。

總而言之，有很多方法可以做到這一點，但是它們可能會圍繞某種javascript變量直接或間接跟蹤當前項目。