Question

我要做的是让4个可扩展的div相互重叠，并在css中设置转换为0.6s。因为扩展持续0.6秒我想扩展div在它完成崩溃后失去它更高的z-index，否则它看起来很傻。但是，它不起作用，z-index保持不变。这可能是愚蠢的事，但我找不到它。谢谢！

<div class="wrapper" style="position: relative;">
<div id="one" style="position: absolute;" onmouseover="
this.style.height='250px';
this.style.zIndex='1';
" onmouseout="
this.style.height='50px';
setTimeout(function() {this.style.zIndex='0';},600);
">blahblahblahblah</div>
<div id="two" style="position: absolute;" onmouseover="
this.style.height='250px';
this.style.zIndex='1';
" onmouseout="
this.style.height='50px';
setTimeout(function() {this.style.zIndex='0';},600);
">blahblahblahblah</div>
</div>

Answer 1

不是在代码中找到错误，也许讨论如何自己找到它会很有用。第一步是打开你的devtools窗口（F12）并打开控制台（按下看起来像一个大于标志的小图标，右边有三个水平条）。运行程序时，您可能会看到以下内容：

TypeError: Cannot set property 'zIndex' of undefined

调试器将停在

行

setTimeout(function() {this.style.zIndex='0';},600);

嗯。显然this.style未定义。怎么会这样？进入控制台（在发生错误的上下文中，换句话说，在传递给setTimeout的函数内）并键入

this.style

确实你会看到它是未定义的。这是为什么？那么，this是什么？

this

你会看到像

这样的东西

Window {top: Window, window: Window, location: Location, ...}

为什么this会成为窗口，而不是我认为它应该是什么？好吧，this通常设置为window，用于调用没有明确this的函数，如elt.set_style()中所示。这就是这里发生的事情。

如何在系统调用的函数中设置this，例如传递给setTimeout的函数？您可以执行@Satpal建议的操作，并将this的值存储在函数外部，使用其他名称（例如self），并明确引用它。或者，您可以将函数绑定到this，如

function timeout_func(){
    this.style.zIndex=0;
}
setTimeout(timeout_func.bind(this));

除了使用控制台查看错误消息并输入要评估的内容之外，您还会发现“范围变量”和“监视表达式”窗口非常有用。

通常，使用devtools可以轻松解决诸如此类的问题。如果您不知道它是什么，谷歌Chrome devtools（从F12开始）。不使用它就像在黑暗中编程一样。

使用javascript setTimeout（）设置z-index

1 个答案: