javascript - 运行多事件函数的更简洁的方式

Question

我实际上是在隐藏一个表单，直到用户将鼠标悬停在 UI 的号召性用语上，然后将表单滑入，同时将 CTA 滑出。然后，如果用户单击表单，它将停留在屏幕上，直到焦点离开。否则，元素会在鼠标离开时返回到它们的原始状态。通过使用 js 添加类，动画全部使用 CSS 转换和转换处理。我已经让它工作正常，但 js 对我来说有点湿，所以我很好奇是否有更简洁的方法来编写它？

function fireNewsletter(){
    $('.newsletter-container').bind("mouseenter focus", function() { 
        $(".newsletter-cta").addClass('hiding'); 
        $(".newsletter-form").addClass('showing'); 
    }); 

    $(".newsletter-container").bind("mouseleave", function(){
        if ( ! $(".newsletter-input").is(":focus")) {
            $(".newsletter-cta").removeClass('hiding');
            $(".newsletter-form").removeClass('showing');
        }   
    });

    $(".newsletter-input").focusout(function(){
        $(".newsletter-cta").removeClass('hiding');
        $(".newsletter-form").removeClass('showing');
    });
}

Answer 1

我可能只是将显示/隐藏逻辑移动到描述性命名的函数中，并缓存对元素的引用。它不会使它更短，但它会表现得更好并且更容易阅读。

function fireNewsletter(){

    var cta = $(".newsletter-cta"),
        form = $(".newsletter-form"),
        input = $(".newsletter-input"),
        container = $(".newsletter-container");

    function show () {
        cta.addClass('hiding'); 
        form.addClass('showing');
    }

    function hide () {
        if (!input.is(":focus")) {
            cta.removeClass('hiding'); 
            form.removeClass('showing');
        }
    }

    container.bind("mouseenter", show);
    container.bind("focus", show);
    container.bind("mouseleave", hide);
    input.bind("focusout", hide)
}