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

简而言之，如果您在登录中单击登录，则会显示登录表单。 如果单击"注册"，将显示注册表单。 它也只是做一些动画和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上阅读的提示。玩得愉快！