Question

我正在学习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>

Answer 1

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

使用参考对象：

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作为一个例子很好 - 所以你可以在以后重用代码：）

Answer 2

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

Answer 3

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

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

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

祝你学习顺利。

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

Answer 4

我发现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>

Answer 5

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

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

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

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

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

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

this.style.opacity = "1";

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

未定义的功能

5 个答案:

使用参考对象：

关闭方法：