我有一个表单来注册用户的一些信息。提交后,进行ajax调用,将数据插入DB,并返回状态代码。根据状态,我显示一个div。 div有一个初始类“隐藏”和一个关闭按钮。从php返回后,我删除了“隐藏”类并添加了“alert-danger”或“alert-success”类。
一旦用户点击关闭(x)按钮,我再次添加“隐藏”类,并检查该元素是否具有“alert-danger”或“alert-success”类,并将其删除。这是第一次(或至少它隐藏)。但是,div不会第二次出现。
我在这里失踪的是什么?
这是div
<div class="alert alert-block fade in status hidden">
<button type="button" class="close" data-dismiss="alert">×</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");
}
});
答案 0 :(得分:1)
我为你准备了一个简单的小提琴
链接:http://jsfiddle.net/qyyegwhu/1/
你是否在css中包含了.hidden类:
.hidden{
display: none;
}
我在复制问题时遇到了麻烦吗?
答案 1 :(得分:0)
我不完全确定,但我相信当您使用引导程序JS函数打开它们时,关闭Bootstrap警报应该是开箱即用的。
这适用于开放:
$('.message-head').text("Thank You");
$('.message').text("Your Request has been taken");
$('.alert').alert();
不需要关闭警报的代码,因为警报会像引导示例http://getbootstrap.com/javascript/#alerts中那样自动关闭
编辑:另一种方法是使用javascript创建警报。这将是解决您的两个问题的方法。 (见JSFiddle)