JavaScript不确定代码的作用

Question

下面的JavaScript是我在登录脚本中使用的，但我想知道它到底是做什么的。

$(function() {

    $('#login-form-link').click(function(e) {
        $("#login-form").delay(100).fadeIn(100);
        $("#register-form").fadeOut(100);
        $('#register-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();

    });

    $('#register-form-link').click(function(e) {
        $("#register-form").delay(100).fadeIn(100);
        $("#login-form").fadeOut(100);
        $('#login-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });

});

我认为这与css有关，可能还与将css类设置为活动有关？

任何帮助都是非常感谢的！

提前感谢！

Answer 1

如果您单击登录链接，它将淡出注册表单，同时淡出登录表单，然后它将为登录表单提供活动的CSS类。

如果您单击注册链接，它将淡出登录表单，同时淡出注册表单，然后它将为注册表单提供活动的CSS类。

简而言之，如果您单击log In表单中的log，则会显示。如果单击注册，则会显示注册表单。它也只是做一些动画和css类赋值。

Answer 2

// jQuery-way to wait until the document is has loaded
$(function() {

    // jQuery equivalence of "addEventListener" which binds a function 
    // (event-handler) to an element, which triggers when you click on said 
    // element (or children of that element, since events bubbles upwards)
    // You add it once, but it will trigger on EVERY click on the element
    $('#login-form-link').click(function(e) {  

        // jQuery way to show a hidden element with a fade-in animation.
        // Delay is added or else the following fadeOut will start early.
        $("#login-form").delay(100).fadeIn(100);  

        // hide an elment, jquery
        $("#register-form").fadeOut(100); 

        // removes css-class, jquery
        $('#register-form-link').removeClass('active'); 

        // Adds a css-class, jquery
        // "this" in an event-handler refers to the element to which the
        // event-handler was added, so in this case: #login-form-link.
        $(this).addClass('active');

        // Prevents the default browser action for the event. 
        // For example, if the clicked element was a link, say
        // <a href="https://google.com">..</a> this would prevent 
        // the browser from loading up google.
        // If you don't have a href or use "" or "#" the browser might
        // refresh the current page or jump to the top of the page, 
        // in such cases you use the e.preventDefault to prevent that!
        // It's common to use with <a>-tags and it's not jQuery.
        e.preventDefault();

    });

});

这里的"e“是一个MouseEvent (不是jquery)。

除此之外，这对您在jQuery上有很大的提示意义。玩得开心!