JavaScript 不确定代码的作用答案

【问题标题】：JavaScript Unsure What Code DoesJavaScript 不确定代码的作用
【发布时间】：2019-01-25 14:26:34
【问题描述】：

我在登录脚本中使用了下面的 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 类有关？

非常感谢任何帮助！

提前致谢！

【问题讨论】：

这是 jQuery - 在 jQuery.com 上查找 jQuery 文档

标签： javascript css function class

【解决方案1】：

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

如果你点击注册链接，它会淡出登录表单，而它会淡出注册表单，然后它会为注册表单提供活动的 CSS 类。

简而言之，如果您单击登录，则会显示登录表单。如果您单击注册，则会显示注册表格。它也只是做一些动画和 css 类分配。

【讨论】：

【解决方案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 的提示。玩得开心！

【讨论】：