activeform变量不更新

Morgan Green 发表于 Dev

摩根·格林

我有一个Jquery函数可以根据当前表单激活和停用表单。当我单击“提交”按钮时，如果将其设置为ID，则可以在页面加载中获取activeform的值，但第二个表单中没有任何值。当我将其设置为class时，它似乎根本不会加载任何东西，并且当我单击提交时我也没有收到任何警报。我的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>

y州

您activeform每次在click事件中都在重新创建变量。删除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);
  });

});