Question

我有一个鼠标悬停功能但是当我尝试淡入optionbox时，它会对所有名为'box'的类进行淡入淡出。我试图在那里设置this，但我的jquery技能（如果我已经有一些）让我失望。

除了这个问题，代码工作正常。

   $(".box").live({
    mouseenter:
       function()
       {
        optionsTimeout = setTimeout(

            function() {
                $('.optionbox').fadeIn(200);
            }

        , 1000);
       },
    mouseleave:
       function()
       {
        clearTimeout(optionsTimeout);
        $('.optionbox').fadeOut(200);
       }
   }
);

HTML：

<div class="box">
    <div class="optionbox"><a href="">Delete</a></div>
</div>
<div class="box">
    <div class="optionbox"><a href="">Delete</a></div>
</div>

Answer 1

试试这个：

$(".box").live({
    mouseenter: function() {
       var $that = $(this);
       optionsTimeout = setTimeout(function() {
           $that.find('.optionbox').fadeIn(200);
       }, 1000);
    },
    mouseleave: function() {
        clearTimeout(optionsTimeout);
        $(this).find('.optionbox').fadeOut(200);
    }
});

Answer 2

在处理程序中使用this（.box元素）作为上下文：

$(this).find('.optionbox').fadeIn(200);

.find()

Answer 3

将其更改为$(this).find('.optionbox')以仅获取当前元素中的元素。

Answer 4

mouseenter: function() {
    (function (self) {
        var optionsTimeout = setTimeout(function() { 
            $('.optionbox', self).fadeIn(200); 
        }, 1000);
        self.data('showTimeout', optionsTimeout);
    })($(this)); 
},
mouseleave: function () {
   var self = $(this),
       optionsTimeout = self.data('showTimeout');
   clearTimeout(optionsTimeout);
   $('.optionbox', this).fadeOut(200);
}

您需要告诉jQuery使用上下文.box中的元素，因此使用$(selector, context)。

self的封闭函数是在执行超时时保存对上下文的引用，因此将其作为自执行函数的参数传递，当超时到期时，它将引用执行.box

通过对所有超时使用相同的全局变量，您也可能遇到问题，因此您应该为每个超时保存上下文超时代码，在我的示例中，我使用$.data来保存代码，并将其还原。 / p>

Jquery：没有为fadein选择父div

4 个答案: