[英]slidetoggle div container on button click using jquery
腳本語言: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>
有什么建議么?
您有一個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);
})
});
演示: 小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.