javascript - activeform 变量不更新

Question

我有一个 Jquery 函数来激活和停用基于当前表单的表单。当我单击提交按钮时，如果我将它设置为 ID，我可以在页面加载时获取事件表单的值，但第二个表单没有任何内容。当我将它设置为类时，它似乎根本没有加载任何内容，并且当我单击提交时我没有收到任何提醒。我的 jquery 是这样的:

<script>
$(document).ready(function() {
    var activeform = "register";
    $("#loginlink").click(function(e) {
        var activeform = "login";
        $("#login").show("blind", 1000);
        $("#register").hide("blind", 1000);
    })
        $("#registerlink").click(function(e) {
        var activeform = "register";
        $("#register").show("blind", 1000);
        $("#login").hide("blind", 1000);
    })
        $(".submit").click(function(e) {
        e.preventDefault();
            alert(activeform);
    });
});
</script>

还有我的表单代码:

<p>
<form id="register">

        <div class='row'>
        <div class="col-xs-4"></div>
        <div class="col-xs-4">
        <label for username><i class="fa fa-user"></i> Username</label>
        <input class="form-control" type="text" id="username"></div>
        <div class="col-xs-4"></div>
        </div>

        <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">
        <label for password><i class="fa fa-key"></i> Password</label>
        <input class="form-control" type="password" id="password"></div>
        <div class="col-xs-4"></div>
        </div>

        <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">
        <label for email><i class="fa fa-envelope"></i> Email</label>
        <input class="form-control" type="text" id="email"></div>
        <div class="col-xs-4"><i class="fa fa-info-circle" title="You may be notified of delayed or denied payments." data-toggle="tooltip"></i></div>
        </div>

        <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">
        <label for submit><i class="fa fa-info" data-toggle="tooltip" title="By Registering you Agree to be Bound by our Terms of Service"></i></label>
        <button type="button" class="btn btn-success form-control" class="submit">Register</button></div>
        <div class="col-xs-4"></div>
        </div>

</form>
        <form id="login" style="display:none;">

        <div class='row'>
        <div class="col-xs-4"></div>
        <div class="col-xs-4">
        <label for username><i class="fa fa-user"></i> Username</label>
        <input class="form-control" type="text" id="username"></div>
        <div class="col-xs-4"></div>
        </div>

        <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">
        <label for password><i class="fa fa-key"></i> Password</label>
        <input class="form-control" type="password" id="password"></div>
        <div class="col-xs-4"></div>
        </div>


        <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">
        <br />
        <button type="button" class="btn btn-success form-control" class="submit">Login</button></div>
        <div class="col-xs-4"></div>
        </div>

</form>
</p>

登入 |登记最后但并非最不重要的。这是一个 fiddle 。 :) https://jsfiddle.net/rm6j5da9/2/

Answer 1

您每次在点击事件中都重新创建了 activeform 变量。删除 var 关键字。 您已经在文档就绪范围内将其声明为全局变量。

$(function(){
  var activeform = "register";

  $("#loginlink").click(function(e) {
     activeform = "login";
     $("#login").show("blind", 1000);
     $("#register").hide("blind", 1000);
  });

  $("#registerlink").click(function(e) {
     activeform = "register";
     $("#register").show("blind", 1000);
     $("#login").hide("blind", 1000);
  });

  $(".submit").click(function(e) {
     e.preventDefault();
     alert(activeform);
  });

});

此外，您还需要确保在登录 和注册 按钮上都有提交 css 类

Here是工作样本