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

如我所见，你声明变量"var isVisible[i] = true;"是错误的。

先做

var isVisible = [];

然后

isVisible[i] = true

我认为你需要在循环之外定义它