Question

我实际上隐藏了一个表单，直到用户将鼠标悬停在UI的动作片段上，然后滑动表单同时滑动CTA。然后，如果用户点击表单，它将保留在屏幕上，直到焦点消失。否则元素将在mouseleave上返回其原始状态。通过使用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)
}

更清洁的方式来运行多事件功能

1 个答案: