1

我正在学习 javascript，但无法弄清楚为什么我的脚本无法正常工作。我猜是因为 imageIn 和 imageOut 函数无法访问 counter 变量。我将如何解决这个问题？imageIn 和 imageOut 在我的错误控制台“未定义”中都有错误。

<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>
4

5 回答 5

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
}

-或者-

关闭方法：

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 时很好的示例 - 因此您可以稍后重用代码:)

于 2012-04-21T20:52:23.187 回答
0

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

于 2012-04-21T20:52:54.533 回答
0

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

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

  1. 定义你的计数器变量：var i = 0, ii = image.length. 否则，您最终可能会使用一些已设置的全局 i 和 ii 变量......
  2. 使用Chrome 开发者工具之类的检查器来查找 JS 代码中的问题。
  3. 添加和删​​除 CSS 类而不是更改元素样式。这将允许您毫不费力地进行多种样式更改。
  4. 学习在代码中使用事件委托，从长远来看，它将对您有所帮助，尤其是当您想开始使用动态内容时。

祝你学习顺利。

此外，就让代码工作而言，您可以查看这个 jsFiddle，它使用您的代码并进行了一些修改：http: //jsfiddle.net/b9Fua/

于 2012-04-21T20:59:15.553 回答
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>
于 2012-04-21T21:04:01.340 回答
0

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

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

此外，您的i变量包含在 和 的闭包imageIn中imageOut。这意味着每当任何图像接收到 mouseover 或 mouseout 事件时，不透明度将始终为您的列表中的最后一个图像发生变化images。

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

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

然后在你的imageIn函数中你会做：

this.style.opacity = "1";

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

于 2012-04-21T21:05:41.387 回答