Jquery: родительский div не выбран для fadein

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

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, чтобы сохранить код и восстановить его.

Answer 3

Измените его на $(this).find('.optionbox'), чтобы получить только элементы в текущем элементе.

Answer 4

Используйте this (элемент .box) внутри обработчика как контекст:

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

.find ()