$(this)子元素css更改根本不起作用 [英] $(this) child element css change not working at all

问题描述

我有一个小问题.

 $('.item').mouseenter(function() {
    setTimeout(function() {
  $(this).find('.item-overlay').css('z-index', '-1');
}, 300);
}).mouseleave(function() {
  $(this).find('.item-overlay').css('z-index', '');
});

 <div class="item">
    <div class="item-overlay">
    </div>

    <iframe>...</iframe>

 </div>

一切正常，除了一件小东西. z-index不变.你们能帮我这个忙吗? 我也尝试过使用"next"，"child"，"find"-均无效:(

Everything works fine, except one small thing. z-index isn't changing. Can you guys help me out with this? I've also tried with "next", "child", "find" - none worked :(

推荐答案

this将是window，而不是元素. (this取决于函数的调用方式，而不是函数的使用位置.)

this within the function you're passing setTimeout will be window, not the element. (this depends on how a function is called, not where it's used.)

您可以保存事件处理程序获得的this值(或者实际上，当您要进行jQuery包装时，只需在setTimeout函数外部使用var进行此操作即可)，例如:

You can save the this value the event handler got (or actually, as you're going to jQuery-wrap it, just do that with a var outside the setTimeout function), e.g.:

$('.item').mouseenter(function() {
    var $this = $(this);
    setTimeout(function() {
        $this.find('.item-overlay').css('z-index', '-1');
    }, 300);
    // ...

这篇关于$(this)子元素css更改根本不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！