如何实现div串的渐显渐隐？

Question

最近碰到一个问题，将问题简化了一下写出来，希望得到大家的指点。下面是问题：功能实现：点击一个显示的div，该div隐藏，下一个div显示；再次点击显示的div...依次进行。源代码为方便查看，下面也给出源代码：1234567css:.myDiv{display:inline-block;width:50px;height:20px;background-color:lightgreen;}.myDiv:not(:nth-child(1)){visibility:hidden;}js:window.onload=function(){varcur=1;varcurDiv=document.getElementById("div"+cur);varnextDiv=document.getElementById("div"+++cur);curDiv.onclick=function(){curDiv.style.visibility="hidden";nextDiv.style.visibility="visible";}}目前的问题是只能进行第一次点击，之后就无法通过点击触发事件了。求教问题出在哪里，如何改进，或者有其他更好的方法？

Answer 1

下面是我根据你的需求写的一个效果（不知道是不是这样）。
1
2
3
4
varaDemo=document.querySelectorAll('.demo'),
_now=0;
for(vari=0;iaDemo[i].addEventListener('click',function(){
if(_now===aDemo.length-1){
_now=0;
}else{
_now+=1;
}
this.className='demo';
aDemo[_now].className+='active';
});
};
你自己的写那个问题在于只给了一个绑定了事件，所以只有点击第一个才有效果。你需要的是给所有都绑定上事件。不需要一个一个使用id来获取，可以使用getElementsByTagName来获取一个元素集合，然后用for循环来给每一个元素绑定事件！