如何使next和prev按鈕瀏覽列表並觸發其功能？

我有一個輕微的問題，我不知道該怎麼做。我有一個列表。單擊每個列表項目會更改背景圖像和div中的文本。但我也想有一個下一個/ prev按鈕，方便導航。這些next和prev按鈕會相應地更改背景和文本框。如何做到這一點？如何使next和prev按鈕瀏覽列表並觸發其功能？

這改變了背景圖片：

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

會不會有實現分組此設置下一個按鈕，一個簡單的方法？任何人都可以幫忙嗎？

謝謝！

來源

2012-03-27 hlotvonen

一般來說，我會通過對活動元素保留一個「指針」來處理這種情況。例如，您可以將與活動列表項目對應的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變量中直接或間接跟蹤當前項目。

來源

2012-03-27 20:22:50 mikepr

此外，請確保您考慮邊界條件，並在第一個元素被選中時在視覺上禁用前一個按鈕，並在選擇最後一個元素時禁用下一個按鈕。 – mikepr 2012-03-27 20:23:51

如何使next和prev按鈕瀏覽列表並觸發其功能？

回答

相關問題