gpt4 book ai didi

javascript - Jquery 不透明度切换

转载 作者:行者123 更新时间:2023-12-03 04:49:32 26 4
gpt4 key购买 nike

我试图让包含登录表单的 div 在单击“创建帐户” anchor 时消失,然后我希望能够通过单击注册表单上的“登录” anchor 来反转该过程Jquery。

我认为我正确链接了 Jquery 和 head 中的 Js 文件。

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="script/jquery-3.1.1.js"></script>
<script src="script/javascript.js"></script>
</head>

这是新的 html

  <div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="" class="signin">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? <a href="" class="create">Create an account</a></p>
</form>
</div>

这是新的 javascript.js

$(document).ready(function(){
$('a.signin').on("click", function(e) {
e.preventDefault();
$('.register-form').fadeOut();
$('.login-form').fadeIn();
});

$('a.create').on("click", function(e) {
e.preventDefault();
$('.login-form').fadeOut();
$('.register-form').fadeIn();
});
)};

顺便说一句,单击 anchor 不会执行任何操作。

任何帮助将不胜感激,提前致谢!

最佳答案

将您的 HTML 更改为此(我已为每个 anchor 添加了一个类)。

<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="#" class="signin">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? <a href="#" class="create">Create an account</a></p>
</form>
</div>

然后将你的 jQuery 替换为此...

$('a.signin').on("click", function(e) {
e.preventDefault();
$('.register-form').fadeOut();
$('.login-form').fadeIn();
});

$('a.create').on("click", function(e) {
e.preventDefault();
$('.login-form').fadeOut();
$('.register-form').fadeIn();
});

使用.on() jQuery 中的函数。对于点击等事件来说效果要好得多。

关于javascript - Jquery 不透明度切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42719389/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com