如何制作下一个和上一个按钮来浏览列表并触发它们的功能？

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 变量中直接或间接跟踪当前项目。