4

私がやろうとしているのは、css で 0.6 秒のトランジションを設定して、4 つの拡張可能な div を互いにオーバーラップさせることです。展開は 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) を開き、コンソールを開くことです (右側に 3 つの水平バーがある大なり記号のような小さなアイコンを押します)。プログラムを実行すると、次のように表示される可能性があります。

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設定されます。それがここで起こっていることです。windowthiselt.set_style()

thisに渡される関数など、システムによって呼び出される関数内で設定するにはどうすればよいsetTimeoutですか? @Satpal が推奨することを実行して、 の値をthis関数の外側に などの別の名前で保存しself、それを明示的に参照することができます。thisまたは、関数をにバインドすることもできます。

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

コンソールを使用してエラー メッセージを表示し、評価対象を入力するだけでなく、「スコープ変数」ウィンドウと「式の監視」ウィンドウが非常に便利です。

一般に、このような問題は devtools を使用して簡単に解決できます。それが何かわからない場合は、Google Chrome devtools (F12 を押して開始します)。これを使用しないことは、文字通り暗闇でプログラミングするようなものです。

于 2013-06-28T11:01:25.527 に答える