未定义的功能

时间:2012-04-21 20:45:14

标签: javascript

我正在学习javascript而且我无法弄清楚为什么我的脚本无效。我猜它是因为imageIn和imageOut函数无法访问计数器变量。我该如何解决这个问题? imageIn和imageOut在我的错误控制台'undefined'中都有错误。

<style type="text/css">

ul {
    list-style-type:none;
}

</style>

<body>

<div id="slideShow">

    <ul>
        <li>
            <img src="stockboat.png" alt="Steam Boat" id="boat" />
        </li>   
    </ul>

</div>

<script type="text/javascript" src="getElementsByClassName.js"></script>
<script type="text/javascript">

    var image = document.getElementsByTagName('img');

    for (i = 0, ii = image.length; i < ii; i++)  {
        image[i].style.opacity = "0.5";
        image[i].addEventListener('mouseover', imageIn, 'false');
        image[i].addEventListener('mouseout', imageOut, 'false');   
    }

    function imageIn() {
        image[i].style.opacity = "1";   
    }

    function imageOut() {
        image[i].style.opacity = "0.5";
    }
</script>

</body>
</html>

5 个答案:

答案 0 :(得分:0)

我认为你没有认识到你的迭代变量是正确的,你必须这样做:

使用参考对象:

function imageIn() {
    this.style.opacity = "1";         // use "this" instead of image array
}

function imageOut() {
    this.style.opacity = "0.5";        // use "this" instead of image array
}

-OR -

关闭方法:

image[i].addEventListener('mouseover'
                         , (function(obj){return function(){imageIn(obj)};})(image[i])
                         , 'false');
image[i].addEventListener('mouseout'
                         , (function(obj){return function(){imageOut(obj)};})(image[i])
                         , 'false');

需要更改功能定义:

function imageIn(obj) {          // added parameters "obj"
    obj.style.opacity = "1";   
}

这个方法允许你引用循环变量,这在循环中使用setTimeOut作为一个例子很好 - 所以你可以在以后重用代码:)

答案 1 :(得分:0)

您可以尝试jsfiddle并将2个函数imagIn和imageOut放在使用它们的代码之前。

答案 2 :(得分:0)

您的<script type="text/javascript" src="getElementsByClassName.js"></script>可能存在错误,导致其余脚本停止执行。

除了这里提到的答案,我还会提供一些其他建议:

  1. 定义您的计数器变量:var i = 0, ii = image.length。否则,您最终可能会使用已设置的一些全局i和ii变量....
  2. 使用Chrome Developer Tools之类的检查器查找JS代码中的问题。
  3. Add and remove CSS classes而不是更改元素样式。这样您就可以轻松地进行多种样式更改。
  4. 了解如何在代码中使用Event Delegation,从长远来看,它会对您有所帮助,尤其是当您想要开始使用动态内容时。
  5. 祝你学习顺利。

    此外,只要让代码生效,您就可以看看这个使用您的代码并进行一些修改的jsFiddle:http://jsfiddle.net/b9Fua/

答案 3 :(得分:0)

我发现jQuery非常节省时间和直观。你只需要习惯一次性功能。看看这个! http://jsfiddle.net/wgxZu/1/

<style type="text/css">

ul {
    list-style-type:none;
}

</style>

<body>

<div id="slideShow">

    <ul>
        <li>
            <img src="http://placekitten.com/100/100" alt="Steam Boat" id="boat" />
        </li>   
        <li>
            <img src="http://placekitten.com/200/100" alt="Steam Boat" id="boat" />
        </li>   
        <li>
            <img src="http://placekitten.com/300/60" alt="Steam Boat" id="boat" />
        </li>   
    </ul>

</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

    var image = document.getElementsByTagName('img');

    for (i = 0, ii = image.length; i < ii; i++)  {
        image[i].style.opacity = "0.5";
        $(image[i]).hover(function(){$(this).css({"opacity":"1.0"})},
                          function(){$(this).css({"opacity":"0.5"})});
    }
</script>

</body>
</html>

答案 4 :(得分:0)

在访问任何元素之前,您需要等待dom完成加载。 使用以下代码包装您的代码:

window.addEventListener('load', function () {
    . . . // Your code
});

此外,您的i变量包含在imageInimageOut的结尾处。这意味着,只要有任何图像接收到鼠标悬停或鼠标移动事件,不透明度将始终更改为images列表中的最后一个图像。

要解决此问题,您可以将范围绑定到函数:

image[i].addEventListener('mouseover', imageIn.bind(image[i]), false);

然后在您的imageIn函数中执行:

this.style.opacity = "1";

最后一点:您将字符串'false'作为addEventListener的第三个参数传递。在JavaScript中,任何非空字符串都将计算为true,因此您应该传递布尔值false以防止事件冒泡。