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

Cleaner way to run multi-event function

本文关键字：方式 简洁 功能 事件 运行      更新时间：2023-09-26

我实际上是隐藏一个表单，直到用户将鼠标悬停在UI的号召性用语部分上，然后将表单滑入，同时滑出CTA。然后，如果用户单击表单，它将停留在屏幕上，直到焦点离开。否则，元素将在鼠标离开时返回到其原始状态。动画都是通过 CSS 过渡和转换来处理的，方法是使用 js 添加类。我已经让它工作正常，但是 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');
    });
}

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

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)
}
相关文章：