Javascript: используйте значок, чтобы контролировать видимость раздела содержимого

Question

Я хочу использовать несколько изображений значков, чтобы контролировать видимость раздела, соответствующего изображениям значков, но я продолжаю получать сообщения об ошибках в консоли. Я написал цикл for, который просматривает изображения значков, которые имеют класс «LED», и оператор if, который переключает видимость раздела.

HTML:

<ul> 
      <li> 
       <img src="images/LED.png" class="LED"/> 
       <h2><span>&lt;&nbsp;</span>Education<span>&nbsp;&gt;</span></h2> 
       <ul class="content"> 

       </ul> 
      </li> 

      <li> 
       <img src="images/LED.png" class="LED"/> 
       <h2><span>&lt;&nbsp;</span>Experience<span>&nbsp;&gt;</span></h2> 
       <ul class="content"> 

       </ul> 
      </li> 

      <li> 
       <img src="images/LED.png" class="LED"/> 
       <h2><span>&lt;&nbsp;</span>Skills<span>&nbsp;&gt;</span></h2> 
       <ul class="content"> 

       </ul> 
      </li> 
</ul> 

Javascript:

var LEDs = document.querySelectorAll('.LED'), i; 
var contents= document.querySelectorAll('.content'), i; 


for(var i = 0; i<LEDs.length; i++){ 
    var isVisible[i] = true; 
    LEDs[i].addEventListener('click', 
     function (evt){ 

      if(isVisible[i]){ 
       contents[i].classList.add('hidden'); 
       isVisible[i] = false; 

      }else{ 
       contents[i].classList.remove('hidden'); 
       isVisible[i] = true; 
      } 

    }); 
}; 

Answer 1

Сначала некоторые ошибка синтаксиса

var isVisible[i] = true; 

Неа, декларированию массив, который вы не может этого сделать. Кроме того, я думаю, что вам нужен только один экземпляр массива isVisible. Поэтому я думаю, вы должны это сделать

var isVisible = []; 
for(var i = 0; i<LEDs.length; i++){ 
    isVisible[i] = true; 

Следующая общая ловушка о закрытии. Вы создаете закрытие как прослушиватель событий при щелчке. Однако i, захваченный замыканием, связан с контекстом цикла for. Другими словами, i в закрытии изменится как i изменений в цикле. Поэтому вам нужно определить другие заводские функции, чтобы ограничить контекст i или исправить его.

function createListener(i) { 
    return function (evt){ 

      if(isVisible[i]){ 
       contents[i].classList.add('hidden'); 
       isVisible[i] = false; 

      }else{ 
       contents[i].classList.remove('hidden'); 
       isVisible[i] = true; 
      } 

    };  
} 

Настоящий рабочий. http://jsfiddle.net/vnbwmbL7/

Answer 2

Как я видеть, вы декларирование переменной "вар IsVisible [я] = истина;" неправильно.

сделать первый

var isVisible = []; 

затем

isVisible[i] = true 

И я думаю, что вам нужно определить его вне цикла