JQuery .hasClass（）不工作？

Question

在我看来，我做错了什么。所以我做了一个由JS代码操作的下拉菜单。

所以它切换绿色类，这使得div块。现在我想通过再次点击相同的按钮关闭下拉菜单。我正在验证是否有通过hasClass（）方法切换绿色类。但它总是返回false。总是。为什么？

JFiddle：https://jsfiddle.net/bg4ev09k/3/ 实际原始代码：

$('#loginform').click(function(){ 
 
    var container = $(".login"); 
 
    if ($(this).hasClass('green')) 
 
    { 
 
    console.log("ere"); 
 
    container.hide(); 
 
    $(this).removeClass('green'); 
 
    } else { 
 
    $('.login').fadeToggle('slow'); 
 
    $(this).toggleClass('green'); 
 
    } 
 
}); 
 

 
$(document).mouseup(function (e) 
 
{ 
 
    var container = $(".login"); 
 

 
    if (!container.is(e.target) // if the target of the click isn't the container... 
 
     && container.has(e.target).length === 0) // ... nor a descendant of the container 
 
    { 
 
     container.hide(); 
 
     $('#loginform').removeClass('green'); 
 
    } 
 
});

<h2><a href="#" id="loginform"><i class="fa fa-sign-in" aria-hidden="true"></i> Enter</a></h2> 
 
<div class="login"> 
 
    <div class="arrow-up"></div> 
 
    <div class="formholderauth"> 
 
    <div class="randompad"> 
 
     <h1>Auth</h1> 
 
     <form action="core/auth/login.php" method="POST"> 
 
     <p> 
 
      <input type="text" name="login" placeholder="Логин..." value="<?php echo @$data['login']; ?>"> 
 
     </p> 
 
     <p> 
 
      <input type="password" name="password" placeholder="Пароль..."> 
 
     </p> 
 
     <p> 
 
      <button type="submit" name="do_login">Войти</button> 
 
     </p> 
 
     </form> 
 
     <p><a href="/core/auth/signup.php"><i class="fa fa-user-plus" aria-hidden="true"></i> Register</a></p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

这种 “破坏” 邪恶的代码太:)

$(document).on('click','#loginform',function(){ 
 
    var container = $(".login"); 
 
    if ($(this).hasClass('green')){ 
 
    container.stop().fadeToggle('slow'); 
 
    $(this).removeClass('green'); 
 
    } else { 
 
    container.stop().fadeToggle('slow'); 
 
    $(this).addClass('green'); 
 
    } 
 
}); 
 

 
// evil code 
 
$('body').prepend('<div id="loginform"></div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="green" id="loginform"><i>☺</i> Click me</a> 
 
<div class="login">LOGIN CONTAINER</div>

希望这会有所帮助！

更新

对不起，我的帖子..我是草率的。

与所有的JavaScript代码我发现这个问题

$(document).mouseup(function (e){ 
    var container = $(".login"); 

    if (!container.is(e.target) // if the target of the click isn't the container... 
    && container.has(e.target).length === 0) // ... nor a descendant of the container 
    { 
     container.hide(); 
     $('#loginform').removeClass('green'); 
    } 
}); 

这将与此复位绿色类

$(document).on('click','#loginform',function(){ 
    var container = $(".login"); 
    if ($(this).hasClass('green')){ 
     container.stop().fadeToggle('slow'); 
     $(this).removeClass('green'); 
    } else { 
     container.stop().fadeToggle('slow'); 
     $(this).addClass('green'); 
    } 
}); 

因此，通过简单的增加&& !$('#loginform').is(e.target)冲突您解决问题

这里是代码

$('button[type="submit"]').mousedown(function(){ 
 
    $(this).css('background', '#2ecc71'); 
 
}); 
 

 
$('button[type="submit"]').mouseup(function(){ 
 
    $(this).css('background', '#1abc9c'); 
 
}); 
 

 
$(document).on('click','#loginform',function(){ 
 
    var container = $(".login"); 
 
    if ($(this).hasClass('green')){ 
 
    container.stop().fadeToggle('slow'); 
 
    $(this).removeClass('green'); 
 
    } else { 
 
    container.stop().fadeToggle('slow'); 
 
    $(this).addClass('green'); 
 
    } 
 
}); 
 

 

 
$(document).mouseup(function (e) 
 
{ 
 
    var container = $(".login"); 
 

 
    if (!container.is(e.target) // if the target of the click isn't the container... 
 
    && container.has(e.target).length === 0 
 
    && !$('#loginform').is(e.target) 
 
    ) // ... nor a descendant of the container 
 
    { 
 
     container.hide(); 
 
     $('#loginform').removeClass('green'); 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #2E3192; 
 
    background: -webkit-linear-gradient(left top, #2E3192, #1BFFFF); 
 
    background: -o-linear-gradient(bottom right, #2E3192, #1BFFFF); 
 
    background: -moz-linear-gradient(bottom right, #2E3192, #1BFFFF); 
 
    background: linear-gradient(to bottom right, #2E3192, #1BFFFF); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    font-family: OpenSans-Regular; 
 
} 
 

 
.menu { 
 
    width: 100%; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    background-color: #34495e; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    position:absolute; 
 
    bottom:0; 
 
} 
 

 
.menu h2 { 
 
    text-align: right; 
 
} 
 

 
.menu h2 a { 
 
    color: #ecf0f1; 
 
    text-decoration: none; 
 
} 
 

 
.menu h2 a:hover { 
 
    color: #1abc9c; 
 
} 
 

 
.auth { 
 
    float: right; 
 
} 
 

 
.signup { 
 
    margin: auto; 
 
    width: 50%; 
 
} 
 

 
.login { 
 
    position: relative; 
 
    display: none; 
 
} 
 

 
.arrow-up { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-bottom: 15px solid white; 
 
    right: 0; 
 
    position: absolute; 
 
    top: -10px; 
 
} 
 

 
.reg { 
 
    width: 400px; 
 
} 
 

 
/*Auth*/ 
 

 
.formholderauth { 
 
    background: white; 
 
    width: 300px; 
 
    border-radius: 5px; 
 
    padding-top: 5px; 
 
} 
 

 
.formholderauth input[type="text"], .formholderauth input[type="password"] { 
 
    padding: 7px 5px; 
 
    margin: 10px 0; 
 
    width: 100%; 
 
    display: block; 
 
    font-size: 16px; 
 
    border-radius: 5px; 
 
    border: none; 
 
    -webkit-transition: 0.3s linear; 
 
    -moz-transition: 0.3s linear; 
 
    -o-transition: 0.3s linear; 
 
    transition: 0.3s linear; 
 
    background-color: #ececec; 
 
    box-shadow: 0 0 1px 1px #A7A9A9; 
 
} 
 

 
.formholderauth input[type="text"]:focus, .formholderauth input[type="password"]:focus { 
 
    outline: none; 
 
    box-shadow: 0 0 1px 1px #1abc9c; 
 
} 
 

 
.formholderauth button[type="submit"] { 
 
    background: #1abc9c; 
 
    padding: 6px; 
 
    font-size: 20px; 
 
    display: block; 
 
    width: 70%; 
 
    margin: auto; 
 
    border: none; 
 
    color: #fff; 
 
    border-radius: 5px; 
 
} 
 

 
.formholderauth button[type="submit"]:hover { 
 
    background: #1bc6a4; 
 
} 
 

 
.formholderauth p { 
 
    margin-bottom: 13px; 
 
    text-align: center; 
 
} 
 

 
.formholderauth p:last-child { 
 
    margin-bottom: 0px; 
 
} 
 

 
.formholderauth a { 
 
    color: #1abc9c; 
 
    text-decoration: none; 
 
} 
 

 
.formholderauth a:hover { 
 
    color: 
 
    color: #10EE30; 
 
} 
 

 
.randompad { 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2><a href="#" id="loginform"><i class="fa fa-sign-in" aria-hidden="true"></i> Enter</a></h2> 
 
<div class="login"> 
 
    <div class="arrow-up"></div> 
 
    <div class="formholderauth"> 
 
     <div class="randompad"> 
 
      <h1>Auth</h1> 
 
      <form action="login.php" method="POST"> 
 
       <p> 
 
        <input type="text" name="login" placeholder="Login..."> 
 
       </p> 
 
       <p> 
 
        <input type="password" name="password" placeholder="Password..."> 
 
       </p> 
 
       <p> 
 
        <button type="submit" name="do_login">Auth</button> 
 
       </p> 
 
      </form> 
 
      <p><a href="signup.php"><i class="fa fa-user-plus" aria-hidden="true"></i> Reg</a></p> 
 
     </div> 
 
    </div> 
 
</div>

我还会急于道歉。祝你有个美好的一天