javascript - タイムアウトでクラスを追加する方法

Question

なぜ機能しないのかわかりません。コードは問題ないと思います。何が問題なのか教えていただけますか? しばらくしてからクラスを追加する必要があります...

$('.main_menu ul li').mouseenter(function(){
    setTimeout(function(){
        $(this).children('.sub_menu_main').addClass('opened')
    },200);
});
$('.main_menu ul li').mouseleave(function(){
    $(this).children('.sub_menu_main').removeClass('opened')
});

Answer 1

$('.main_menu ul li').on({
    mouseenter: function(){
        var self = this; //in scope
        $(self).data('timer', setTimeout(function(){ //new scope
            $(self).children('.sub_menu_main').addClass('opened'); //out of scope
        },200);
    },
    mouseleave: function(){
        clearTimeout($(this).data('timer'));
        $(this).children('.sub_menu_main').removeClass('opened');
    }
});

Answer 2

その範囲で行うとあなたが考えthisていることを参照していないと思います。これへの参照を外側のスコープに保存してから、代わりにその参照を介してホバーされた要素にアクセスする必要があります。

$('.main_menu ul li').mouseenter(function(){
    var that = this;
    setTimeout(function(){
        $(that).children('.sub_menu_main').addClass('opened')
    },200);
});