$(this) 子元素 css 更改根本不起作用答案

【问题标题】：$(this) child element css change not working at all$(this) 子元素 css 更改根本不起作用
【发布时间】：2013-07-31 07:29:41
【问题描述】：

我有一个小问题。

 $('.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”——没有一个成功:(

【问题讨论】：

你的元素是绝对定位的吗？
.item 是相对的，.item-overlay 是绝对的...... T.J Crowder 的解决方案就像一个魅力。谢谢！

标签： jquery this next

【解决方案1】：

this 在您传递的函数中setTimeout 将是window，而不是元素。（this 取决于函数的调用方式，而不是使用位置。）

您可以保存事件处理程序获得的 this 值（或者实际上，当您要使用 jQuery 包装它时，只需在 setTimeout 函数之外使用 var 即可），例如：

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

【讨论】：

【解决方案2】：

“.item-overlay”需要绝对定位

【讨论】：

【解决方案3】：

我认为 this 超出了您的功能。所以，你可以设置 var that = this;在设置超时之前。并用它代替这个。

回调东西

【讨论】：