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

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

先做

var isVisible = [];

然后

isVisible[i] = true

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

Javascript：使用图标来控制部分内容的可见性

2 个答案: