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

Question

In a series of elements ordered by id numbers as

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

Imagine that we want to show/hide each element by arrow keys. What is the best way to do so in pure Javascript?

The question is when the first three elements are shown, how we can detect that back arrow show hide element #3 and forward arrow should show element #4 ?

Answer 1

We need to keep track of the current div being shown and handle the keydown event to check for the left and right keys. See my example below.

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

Update

If you weren't aware of the number of elements then I suggest you use a class to define the elements.

HTML

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

JS

All the javascript would be the same except for how you initialise divs and numDivs .

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