jQuery添加/删除类第二次不起作用

Question

我有一个表格可以向用户注册一些信息。 提交后，将进行ajax调用，该调用将数据插入DB中并返回状态代码。 根据状态，我显示一个div。 div有一个初始类“ hidden”和一个关闭按钮。 从php返回后，我删除了“ hidden”类并添加了“ alert-danger”或“ alert-success”类。

一旦用户单击close（x）按钮，我将再次添加“ hidden”类，并检查元素是否具有“ alert-danger”或“ alert-success”类，并将其删除。 这是第一次（至少是隐藏）。 但是，div不会第二次出现。

我在这里想念什么？

这是div

<div class="alert alert-block fade in status hidden">
 <button type="button" class="close" data-dismiss="alert">&times;</button>
 <h4 class="message-head"></h4>   
 <p class="message"></p>   
</div>

这是成功/错误时运行的代码

$.ajax({
  type:"post",
  url:"register.php",
  data:"name="+name+"&phone="+phone+"&email="+email+"&msg="+msg,
  success:function(data){

  if(data.status === 'success'){
     //show the status msg
     $('.message-head').text("Thank You");
     $('.message').text("Your Request has been taken");
     $(".status").removeClass("hidden").addClass('alert-success');

      }else {
     $('.message-head').text("Sorry");
     $('.message').text("There is some Error. Please Try Again Later");
     //alert(data.status);
     $('.status').removeClass('hidden').addClass('alert-danger');
}}

这是关闭按钮单击的代码

$('.close').click(function(){
 if ( $('.status').hasClass("alert-danger") ) {
 $('.status').removeClass("alert-danger").addClass("hidden");
}else if ( $('.status').hasClass("alert-success") ) {
 $('.status').removeClass("alert-success").addClass("hidden");
}
});

Answer 1

我为你整理了一个简单的小提琴

链接： http ： //jsfiddle.net/qyyegwhu/1/

您是否将CSS中的.hidden类包括在内：

.hidden{
    display: none;
}

我无法以其他方式复制问题吗？

Answer 2

我不确定，但是我相信当您使用Bootstrap JS Function打开它们时，关闭Bootstrap警报应该可以立即使用。

这应该适用于打开：

$('.message-head').text("Thank You");
$('.message').text("Your Request has been taken");
$('.alert').alert();

不需要用于关闭警报的代码，因为就像启动示例http://getbootstrap.com/javascript/#alerts一样，警报是自​​动关闭的

编辑：另一种方法是使用javascript创建警报。 这将是两个问题的解决方案。 （请参阅JSFiddle ）