4

我想要做的是让 4 个可扩展的 div 相互重叠，并在 css 中设置 0.6 秒的过渡。因为扩展持续 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>
4

1 回答 1

6

与其在代码中查找错误，不如讨论如何自己找到它会很有用。第一步是打开您的 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 可以轻松解决此类问题。如果您不知道它是什么，请使用 Google Chrome 开发工具（按 F12 开始）。不使用它就像在黑暗中编程一样。

于 2013-06-28T11:01:25.527 回答