javascript - Bootstrap 警报显示一次后不会隐藏

Question

我在使用 jQuery 显示的警报消息时遇到问题。显示后，我会进行数据验证，然后尝试再次隐藏它。

它不起作用，控制台中没有错误，甚至在它之前和之后打印日志。

代码

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
      $('#error-message').hide();
      $('#message').html('').css('color', 'green');
  } else 
      $('#message').html('Passwords Do Not Match').css('color', 'red');
      $('#error-message').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-danger" id="error-message">
   <h6 align="left" id='message'></h6> 
</div>

显示但不再隐藏

Answer 1

您的 else 语句中缺少 { }。

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
      $('#error-message').hide();
      $('#message').html('').css('color', 'green');
  } else {
      $('#message').html('Passwords Do Not Match').css('color', 'red');
      $('#error-message').show();
  }
});

.alert {
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-danger" id="error-message">
   <h6 align="left" id='message'></h6> 
</div>

<input type="text" id="password"/>
<input type="text" id="confirm_password"/>