JQuery .hasClass() 不工作？

Question

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

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

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>

我仍然为我的匆忙道歉。祝你有美好的一天