我正在学习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>
答案 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>
可能存在错误,导致其余脚本停止执行。
除了这里提到的答案,我还会提供一些其他建议:
var i = 0, ii = image.length
。否则,您最终可能会使用已设置的一些全局i和ii变量.... 祝你学习顺利。
此外,只要让代码生效,您就可以看看这个使用您的代码并进行一些修改的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
变量包含在imageIn
和imageOut
的结尾处。这意味着,只要有任何图像接收到鼠标悬停或鼠标移动事件,不透明度将始终更改为images
列表中的最后一个图像。
要解决此问题,您可以将范围绑定到函数:
image[i].addEventListener('mouseover', imageIn.bind(image[i]), false);
然后在您的imageIn
函数中执行:
this.style.opacity = "1";
最后一点:您将字符串'false'
作为addEventListener的第三个参数传递。在JavaScript中,任何非空字符串都将计算为true,因此您应该传递布尔值false
以防止事件冒泡。