Question

脚本语言：Jquery

我正在尝试使用Jquery切换div容器，但它没有响应。我想在Register按钮上单击切换容器。这是我到目前为止尝试的代码，

<html>
    <head>
        <style>
            #Submit:hover{
                background: linear-gradient(#36caf0 5%, #22abe9 100%);
            }
            #container {
                width: 960px;
                height: 610px;
                margin:50px auto;
                font-family: 'Droid Serif', serif;
                position:relative;
                background: #36caf0;
            }}
        </style>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
        <input type = "button" id = "register" value ="Register"></input><br><br>
        <div id = "mydiv" >
            <div id = "container">
                Name : <input type ="text" id = "name" value = ""></input><br><br>
                Email : <input type ="text" id = "email" value = ""></input><br><br>
                Mobile : <input type ="text" value = "" id = "mobile"></input><br><br>
                Password : <input type ="Password" value = "" id = "password"></input><br><br>
                Confirm password : <input type ="Password" value = "" id = "cpassword"></input><br><br>
                <input type ="button" id = "Submit" value = "Submit"></input><br><br>
            </div>
            <script>    
                $(document).ready(function(){
                    $("#mydiv").ready(function(){
                        $("#register").click(function(){
                            $("#container").slideToggle("slow",function(){

                            });
                            $("#Submit").click(function(){
                                var regexemail = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                                //return regex.test(email);
                                var name = $("#name").val();
                                var email = $("#email").val();
                                var mobile = $("#mobile").val();
                                var password = $("#password").val();
                                var cpassword = $("#cpassword").val();
                                var regexMobile  = /^([0-9])+$/;
                                if (name == '' || email == '' || mobile == '' || password == '' || cpassword == '') {
                                    alert("Please fill all fields...!!!!!!");
                                } else if ((password.length) < 8) {
                                    alert("Password should atleast 8 character in length...!!!!!!");
                                } else if (!(password).match(cpassword)) {
                                    alert("Your passwords don't match. Try again?");
                                } else if(!regexemail.test(email)){
                                    alert('Enter correct email');
                                } else if(!regexMobile.test(mobile) && mobile.length>10){
                                    alert('Enter correct mobile number');
                                }
                                alert(name);
                            })
                        });
                    });    
                </script>
            </body>
        </html>

有什么建议吗？

Answer 1

你有一个synatax错误，一个未关闭的$(document).ready(...，也$("#mydiv").ready(function(){不正确，另一个问题是在注册点击处理程序中注册submit点击句柄..这可能会导致多个点击处理程序进行注册

$(document).ready(function () {
    $("#register").click(function () {
        $("#container").slideToggle("slow", function () {});
    });
    $("#Submit").click(function () {
        var regexemail = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        //return regex.test(email);
        var name = $("#name").val();
        var email = $("#email").val();
        var mobile = $("#mobile").val();
        var password = $("#password").val();
        var cpassword = $("#cpassword").val();
        var regexMobile = /^([0-9])+$/;
        if (name == '' || email == '' || mobile == '' || password == '' || cpassword == '') {
            alert("Please fill all fields...!!!!!!");
        } else if ((password.length) < 8) {
            alert("Password should atleast 8 character in length...!!!!!!");
        } else if (!(password).match(cpassword)) {
            alert("Your passwords don't match. Try again?");
        } else if (!regexemail.test(email)) {
            alert('Enter correct email');
        } else if (!regexMobile.test(mobile) && mobile.length > 10) {
            alert('Enter correct mobile number');
        }

        alert(name);
    })

});

演示：Fiddle

使用jquery在按钮上单击滑动切换div容器

1 个答案: