在点击时切换DIV的可见性

时间:2016-09-03 00:44:05

标签: javascript html dom

我有一百万div个元素。

我想实现以下功能:

  1. 当我点击 vsibile div时,它就会消失。

  2. 当我点击div时,任何隐藏<{strong>的div都会重新出现。

  3. 示例:

    <div>1</div> <!-- Invisible div -->
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div> <!-- Currently visible. On click, div 1 becomes visible and this becomes invisible-->
    ... 1.000.000
    

1 个答案:

答案 0 :(得分:1)

-rinc
prev = false;

document.querySelectorAll("#test div").forEach(function(a,i){
  a.index = i;
  a.addEventListener("click",function(){
  if (prev !== false) document.querySelectorAll("#test div")[prev].style.opacity = 1;
  this.style.opacity = 0;
  prev = this.index;
})});
#test * {
  width: 60px;
  height: 60px;
  margin: 10px;
  background-color: green;
}