如何通过Javascript显示/隐藏一系列有序元素？
如何通过Javascript显示/隐藏一系列有序元素？
提问于 2013-04-02 15:08:14
在按id号排序的一系列元素中如下所示
<div id="test-1">
<div id="test-2">
<div id="test-3">
<div id="test-4">
<div id="test-5">想象一下，我们想要通过箭头键显示/隐藏每个元素。在纯Javascript中做到这一点的最佳方式是什么？
问题是，当前三个元素显示时，我们如何检测后退箭头显示隐藏元素#3，前进箭头应该显示元素#4
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-02 15:19:36
我们需要跟踪当前显示的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之外，所有的javascript都是相同的。
var divs = document.getElementsByClassName('slide');
var numDivs = divs.length;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15758162
复制相关文章
相似问题
腾讯云开发者
