javascript - 如何通过Javascript显示/隐藏一系列有序元素？

Question

在一系列按 id 编号排序的元素中

<div id="test-1">
<div id="test-2">
<div id="test-3">
<div id="test-4">
<div id="test-5">

想象一下，我们想通过箭头键显示/隐藏每个元素。在纯 JavaScript 中这样做的最佳方法是什么？

问题是当显示前三个元素时，我们如何检测后箭头显示隐藏元素#3和前箭头应该显示元素#4？

Answer 1

我们需要跟踪当前显示的 div 并处理keydown事件以检查左右键。请参阅下面的示例。

jsFiddle

JavaScript

var numDivs = 5;

var divs = [];
for (var i = 1; i < numDivs + 1; i++)
    divs.push(document.getElementById('test-' + i));

var current = 0;
showDiv(current);

window.onkeydown = function (e) {
    if (e.keyCode == 37) { 
        // Left
        current--;
        if (current < 0)
            current = numDivs - 1; // wrap around back to max
        showDiv(current);
    } else if (e.keyCode == 39) {
        // Right
        current++;
        if (current == numDivs)
            current = 0; // wrap around back to 0
        showDiv(current);
    }
};

// Hide all divs except for index passed in
function showDiv(div) {
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.display = div == i ? 'block' : 'none';
    }
}

CSS

div {
    width:100px;
    height:100px;
    background-color:#F00;
    display:none;

    line-height:100px;
    font-size:4em;
    text-align:center;
}
div:nth-child(even) {
    background-color:#0F0;
}

更新

如果您不知道元素的数量，那么我建议您使用一个类来定义元素。

HTML

<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>

JS

除了你如何初始化divs和numDivs.

var divs = document.getElementsByClassName('slide');
var numDivs = divs.length;