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类。

如果单击register链接，它会淡出登录表单，而在注册表单中淡出，则为注册表单提供有效的CSS类。

简而言之，如果您单击登录，则会显示登录表单。如果单击注册，则会显示注册表格。它也只做一些动画和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。玩得开心！

JavaScript不确定代码的作用

2 个答案: