Question

我试图编写一个显示隐藏图像的javascript程序。

这里是html部分：

    <!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title> Exercice 3 </title>
                <link rel="stylesheet" href="style.css" />
        </head>
        <body>
                <header>
                </header>
                <section>
                        <article>
                                <figure>
                                        <img src="images/powsoundeffect.png" alt="image" />
                                        <figcaption>
                                                Image 1
                                        </figcaption>
                                </figure>
                                <figure>
                                        <img src="images/thwack_soundeffect.png" alt="image" />
                                        <figcaption>
                                                Image 2
                                        </figcaption>
                                </figure>
                                <figure>
                                        <img src="images/tophat.png" alt="image" />
                                        <figcaption>
                                                Image 3
                                        </figcaption>
                                </figure>
                                <figure>
                                        <img src="images/1311511622.png" alt="image" />
                                        <figcaption>
                                                Image 4
                                        </figcaption>
                                </figure>
                                <ul>
                                        <li>
                                                <a href="#"> Image 1 </a>
                                        </li>
                                        <li>
                                                <a href="#"> Image 2 </a>
                                        </li>
                                        <li>
                                                <a href="#"> Image 2 </a>
                                        </li>
                                        <li>
                                                <a href="#"> Image 2 </a>
                                        </li>
                                </ul>
                        </article>
                </section>
                <script type="text/Javascript" src="script.js" >
                </script>
        </body>
</html>

css：

figure {
        width: 20%;
        position: absolute;
        visibility: hidden;
}

ul li {
        border: 1px solid black;
        width: 10%;
}

剧本：

var arrayA = document.querySelectorAll('a');
var arrayImg = document.querySelectorAll('figure');

function show_Image(text, img) {
        text.style.fontSize = '2em';
        arrayImg[img].style.visibility = 'visible';
}

for (var i = 0, c = arrayA.length; i < c; i++) {
        arrayA[i].addEventListener('mouseover', function(e) {
                                                        show_Image(e.target, i);
                                                },
                                                false);
}

当我尝试运行脚本时，safari上会出现以下错误：

TypeError: 'undefined' is not an object (evaluating 'arrayImg[img].style')

和铬：

Uncaught TypeError: Cannot read property 'style' of undefined

似乎arrayImg不包含querySelector的对象，我不明白为什么...... 有人可以帮我这个吗？

谢谢！

Answer 1

正如Jonathan Lonowski在其评论中所描述的那样，变量'i'在绑定了eventListener之后会增加 - 并且匿名函数将使用增加的值。

你可以这样：

for (var i = 0, c = arrayImg.length; i < c; i++) {
    arrayA[i].addEventListener('mouseover', (function(i,e) {
        show_Image(e.target, i);
    }).bind(this,i), false);
}

它将匿名函数绑定到执行绑定的作用域，并将'i'作为第一个参数绑定，不会再改变。

即使这不是达到你想要做的最干净的方式，它也会以你想要的方式工作。

TypeError：＆＃39; undefined＆＃39;不是一个对象（评估＆＃39; arrayImg [img] .style＆＃39;）

1 个答案: