Question

我是JS的新人。我有3个表单 - register-form，reset-form，login-from。

<style>
.form .register-form {
  display: none;
}
.form .reset-form {
  display: none;
}
.form .login-form {
}
</style>

在登录表单中我也有

<p class="message">Not Registered? <a href="#" id ="alogin">Register.</a></p>
<p class="message">Forgot password? <a href="#" id ="arestore">Reset.</a></p>

假设，当我按下注册或重置时，我隐藏登录表格并进入注册/重置。我也有JS，但它工作不正确。我做错了什么？

    <script>
    $('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
    aregister.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'block';
    document.getElementById('formlogin').style.display = 'none';
    document.getElementById('formreset').style.display = 'none';
    }
    arestore.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'none';
    document.getElementById('formlogin').style.display = 'none';
    document.getElementById('formreset').style.display = 'block';

    }
    alogin.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'none';
    document.getElementById('formlogin').style.display = 'block';
    document.getElementById('formreset').style.display = 'none';

    }
    </script>

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Loggie - Login</title>

</head>

<style>


@import url(https://fonts.googleapis.com/css?family=Roboto:300);


.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
  position: relative; top: 25px; left: 0; right: 0; bottom: 25px;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #5d98cc;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #397eba;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #5d98cc;
  text-decoration: none;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
 font-family: "Roboto", sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}



.form .register-form {
  display: none;
}
.form .reset-form {
  display: none;
}
.form .login-form {
}

</style>


{% extends "header.html" %}


{% block content %}


{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/accounts.css' %}" type="text/css">



<div class="login-page">
    <div class="form">


      <form class="register-form" method="POST" action="{% url 'signup' %}" id = "formregister">
          {% csrf_token %}
          <input type="text" name="username" placeholder="имя пользователя" required autofocus id="id_username_reg"
          maxlength="150"/>
          <input type="text" name="email" placeholder="email" required id="id_email_reg" maxlength="200" />
          <input type="password" name="password1" placeholder="пароль" required id="id_password1"/>
          <input type="password" name="password2" placeholder="повторите пароль" required id="id_password2"/>
          <button type="submit">создать</button>

          <p class="message">Уже зарегистрированны? <a href="#" id ="alogin">Войти.</a></p>
          <p class="message">Забыли пароль? <a href="#" id ="arestore">Восстановить.</a></p>
      </form>


      <form class="login-form" method="POST" action="{% url 'login' %}" id = "formlogin">
          {% csrf_token %}
          <input type="text" name="username" placeholder="имя пользователя"  for=<input type="text" name="username"
          maxlength="254" autofocus required id="id_username_log" />
          <input type="password" name="password" placeholder="пароль" for=<input type="password" name="password"
          id="id_password_log" required />

          <p style="color: red">{{ error }}</p>

           <button type="submit">войти</button>

           <p class="message">Не зарегистрированны? <a href="#" id ="aregister">Создать аккаунт.</a></p>
           <p class="message">Забыли пароль? <a href="#" id ="arestore">Востановить.</a></p>
      </form>

      <form class="reset-form" method="POST" action="{% url 'reset'%}" id = "formreset">
          {% csrf_token %}
          <input type="text" name="email" placeholder="email" required id="id_email_res" maxlength="200" />
          <button type="submit">Восстановить</button>

          <p class="message">Не зарегистрированны? <a href="#" id ="aregister">Создать аккаунт.</a></p>
          <p class="message">Уже зарегистрированны? <a href="#" id ="alogin">Войти.</a></p>
      </form>
  </div>
</div>




 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script>
    $('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
    aregister.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'block';
    document.getElementById('formlogin').style.display = 'none';
    document.getElementById('formreset').style.display = 'none';
    }
    arestore.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'none';
    document.getElementById('formlogin').style.display = 'none';
    document.getElementById('formreset').style.display = 'block';

    }
    alogin.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'none';
    document.getElementById('formlogin').style.display = 'block';
    document.getElementById('formreset').style.display = 'none';

    }
    </script>
</html>

＆＃13;

Answer 1

我使用的for具有其引用的表单的类名。请仔细阅读代码。

    $('.message a').click(function(){
       //hide all forms
       $('.form form').addClass('hidden');
       
       //find which form to show
       var form = $(this).attr('for');
       $('.' + form + '').removeClass('hidden');
       
       //$('.' + form + '').animate({height: "toggle", opacity: "toggle"}, "slow");
   });

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
  position: relative; top: 25px; left: 0; right: 0; bottom: 25px;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #5d98cc;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #397eba;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #5d98cc;
  text-decoration: none;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
 font-family: "Roboto", sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Loggie - Login</title>

</head>

<div class="login-page">
    <div class="form">


      <form class="login-form" method="POST" action="" id = "formlogin">
          <input type="text" name="username" placeholder="имя пользователя"  for=<input type="text" name="username"
          maxlength="254" autofocus required id="id_username_log" />
          <input type="password" name="password" placeholder="пароль" for=<input type="password" name="password"
          id="id_password_log" required />

          <p style="color: red"></p>

           <button type="submit">войти</button>

           <p class="message">Не зарегистрированны? <a href="#" id ="aregister" for="register-form">Создать аккаунт.</a></p>
           <p class="message">Забыли пароль? <a href="#" id ="arestore" for="reset-form">Востановить.</a></p>
      </form>
      
      <form class="register-form hidden" method="POST" action="" id = "formregister">
          <input type="text" name="username" placeholder="имя пользователя" required autofocus id="id_username_reg"
          maxlength="150"/>
          <input type="text" name="email" placeholder="email" required id="id_email_reg" maxlength="200" />
          <input type="password" name="password1" placeholder="пароль" required id="id_password1"/>
          <input type="password" name="password2" placeholder="повторите пароль" required id="id_password2"/>
          <button type="submit">создать</button>

          <p class="message">Уже зарегистрированны? <a href="#" id ="alogin" for="login-form">Войти.</a></p>
          <p class="message">Забыли пароль? <a href="#" id ="arestore" for="reset-form">Восстановить.</a></p>
      </form>

      <form class="reset-form hidden" method="POST" action="" id = "formreset">
          <input type="text" name="email" placeholder="email" required id="id_email_res" maxlength="200" />
          <button type="submit">Восстановить</button>

          <p class="message">Не зарегистрированны? <a href="#" id ="aregister" for="register-form">Создать аккаунт.</a></p>
          <p class="message">Уже зарегистрированны? <a href="#" id ="alogin" for="login-form">Войти.</a></p>
      </form>
  </div>
</div>
</html>

Answer 2

这是你点击注册的时候。尝试重复登录和重置

$('#aregister').click(function(e){
    $('#formregister').show();
    $('#formlogin').hide();
    $('#formreset').hide();
    $('#alogin').show();
    $('#areset').show();
    $(this).hide();
});

JS显示和隐藏表单

2 个答案: