Question

我正在尝试与班级＆＃39; backarea＆＃39;消失，同时与班级成功登记＆＃39;出现在屏幕上。听起来很简单我知道，但困难的是我希望只有当某个用户名和密码输入2个不同的输入框并点击登录按钮时才会发生这种情况。必须输入的用户名是＆＃34; CodeAcademy＆＃34;并且密码必须是＆＃34;有趣的编码＆＃34;。我不知道自己做错了什么，但希望如果你看下面的代码，你可以告诉我。我发布了所有代码，因为我不知道会发生什么，并且不会使用完整的代码。谢谢。 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Log in box</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
<div class="successLog">
<div class="header">
    <ul class="cats">
        <li class="listItems" id="home">Home</li>
        <li class="listItems" id="dashboard">Dashboard</li>
        <li class="listItems" id="contactUs">Contact Us</li>
    </ul>
  </div>
  <div class='dropdownHome'>
    <ul class="catLists">
        <li class="catListItem">Event Calender</li><br>
        <li class="catListItem">Bookings</li><br>
        <li class="catListItem">Picture Gallery</li><br>
        <li class="catListItem">Login</li><br>
        <li class="catListItem">Sign Up</li>
    </ul>
  </div>
  <div class="dropdownDashboard">
    <ul class="catLists">
        <li class="catListItem">Saved Info</li><br>
        <li class="catListItem">Friends</li><br>
        <li class="catListItem">Document</li><br>
        <li class="catListItem">Profile</li><br>
        <li class="catListItem">Account</li>
    </ul>
  </div>
  <div class="dropdownContactUs">
    <ul class="catLists">
        <li class="catListItem">Email</li><br>
        <li class="catListItem">Forum</li><br>
        <li class="catListItem">Phone-numbers</li><br>
        <li class="catListItem">Facebook</li><br>
        <li class="catListItem">Twitter</li>
    </ul>
  </div><Br><Br><Br>
    <h1 class="welcomeBack">Hello! Welcome back Code Acedamy</h1>
    <button class="logOut">Log Out</button>
</div>
<div class="backarea">
    <input type="text" placeholder="Username" class="userInput" name="userInput"><h2 class="username">Username:</h2></input>
    <input type="password" class="passInput" placeholder="Password"><h2 class="password">Password:</h2></input>
    <button class="login">Log In</button>
    <p class="createacc">Don't have an account? <a href="http://www.example.com/" class="createone">Creat one.</a></p>
    <p class="error">Sorry but that username or password is incorrect.</p>
</div>
</body>
</html>

CSS：

body {
    background-color:#F0F0F0;
}
.successLog {
    background-color:#8A8A8A;
    height:450px;
    width:700px;
    z-index:1;
    opacity:0;
}
.backarea {
    background-color:#6DE3E3;
    width:255px;
    height:300px;
    border:1px solid black;
    border-radius:9px;
    position:relative;
    top:67px;
    left:230px;
    position:fixed;
}
.userInput {
    padding:5px;
    margin:7px;
    font-family: 'Lato', sans-serif;
    position:relative;
    top:50px;
    left:35px;
    border:1px solid white;
}
.userInput:hover {
    border:2px solid #60BF68;
}
.username {
    color:#E60716;
    font-family: 'Oswald', sans-serif;
    position:relative;
    bottom:50px;
    left:75px;
}
.passInput {
    padding:5px;
    margin:7px;
    font-family: 'Lato', sans-serif;
    position:relative;
    top:20px;
    left:35px;
    border:1px solid white;
}
.passInput:hover {
    border:2px solid #60BF68;
}
.password {
    color:#E60716;
    font-family: 'Oswald', sans-serif;
    position:relative;
    bottom:80px;
    left:75px;
}
.login {
    color:white;
    background-color:#E60716;
    padding:5px;
    font-family: 'Oswald', sans-serif;
    border:none;
    margin:10px;
    position:relative;
    bottom:60;
    left:71;
    height:40;
    width:80;
    font-size:20px;
    border-radius:4px;
}
.login:hover {
    background-color:#B81414;
    border:1px solid black;
}
.createacc {
    position:relative;
    bottom:73px;
    font-family: 'Roboto Condensed', sans-serif;
    padding:8
}
.createone {
    text-decoration:none;
}
.createone:hover {
    text-decoration:underline;
}
.error {
    color:red;
    font-family: 'Merriweather', serif;
    font-size:10;
    position:relative;
    bottom:93px;
    text-align:center;
    opacity:0
}
/*DROP DOWN MENU
/*DEFUALT CLASSES*/
.clicked {
    color:#fff;
}
.invis {
    opacity:0;
}
/*HTML CLASSES*/
.header {
    background-color:black;
    height:50px;
    border-radius:10px;
    z-index:10;
}
li {
    color:white;
    display:inline;
    width:100%
}
.cats {
    padding:6px;
    width:100%;
    font-size:27px;
    font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
    width:100px;
    font-size:27px;
    font-family: 'Khand', sans-serif;
    color:#96F29C;
    display:inline;
    position:relative;
    padding-left:70px;
}
.cats .listItems:active {
    width:100px;
    font-size:27px;
    font-family: 'Khand', sans-serif;
    color:#318A29;
    display:inline;
    position:relative;
    padding-left:70px;
}
.listItems {
    padding:70px;
}
.dropdownHome {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:14px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.dropdownDashboard {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:255px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.dropdownContactUs {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:507px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.catLists {
    font-size:18px;
    text-align:center;
    position:relative;
    right:20;
    font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
    color:black;
}
.welcomeBack {
    font-family: 'Oswald', sans-serif;
    color:blue;
    text-align:center;
}
.logOut {
    position:relative;
    top:130px;
    left:312px;
    padding:5px;
    border:none;
    background-color:red;
    color:white;
    width:100px;
    height:40px;
    font-size:20px;
    font-family: 'Oswald', sans-serif;
}
.logOut:hover {
    background-color:#B51919;
    border-top:1px solid #F7A3A3;
    border-left:1px solid #F7A3A3;
}

JavaScript的：

$(document).ready(function() {
    $('.login').click(function(){
        var userResult = $('input[name=userInput]').val();
        var passResult = $('input[name=passInput]').val();
        if(userResult === "CodeAcademy" && passResult === "fun-coding") {
           $('.backarea').fadeOut('fast');
           $('.successLog').fadeTo('fast',1);
        };
        else {
        $('.passInput').css('border-color','red');
        $('.userInput').css('border-color','red');
        $('.error').fadeTo('fast',1);
        $('.error').effect( "bounce",{ times: 3 },"slow" );
        };
    });
});
$(document).ready(function(){
    $('#home').click(function(){
        $('.dropdownHome').slideToggle('slow');
        $('.dropdownHome').fadeTo('fast',1);
    });
});
$(document).ready(function(){
    $('#dashboard').click(function(){
        $('.dropdownDashboard').slideToggle('slow');
        $('.dropdownDashboard').fadeTo('fast',1);
    });
});
$(document).ready(function(){
    $('#contactUs').click(function(){
        $('.dropdownContactUs').slideToggle('slow');
        $('.dropdownContactUs').fadeTo('fast',1);
    });
});

很多代码都与问题无关。许多代码用于下拉菜单，当div执行时会出现。 javascript很可能是您需要查看的内容。

Answer 1

var passResult = $('input[name=passInput]').val();

<input type="password" class="passInput" placeholder="Password">

您正在选择名为“passInput”的输入，但您的密码字段不是有一个名字。

要么给它起个名字，要么通过课堂选择。

此外，您的HTML无效。输入元素不能包含HTML，br也应该关闭。

Jquery和Javascript val（）输入问题

1 个答案: