Question

我有一个Jquery函数来根据当前表单激活和停用表单。当我单击提交按钮时，如果我将其设置为ID，则可以在页面加载时获取activeform的值，但是第二种形式没有任何内容。当我将它设置为课程时，它似乎根本不加载任何内容，当我点击提交时我没有收到任何警报。我的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>

登录|寄存器最后但并非最不重要的。这是一个小提琴。 :) 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是一个工作样本

activeform变量不更新

1 个答案: