內容未顯示在動態助推器警報中

Question

我正在嘗試創建動態引導警報。 但是，消息'成功保存'和'失敗'沒有得到顯示。

何時，我檢查並檢查了html，我看不到在'a.close'之後添加'strong'標籤。

有什麼不好的代碼？

$(document).ready(function(){ 
 
    $('.alert').hide(); 
 
    $('#success').click(function(){ 
 
\t $('.message').text(''); 
 
\t $('.message').removeClass('alert-danger'); 
 
\t $('.message').addClass('alert-success'); 
 
\t $('.alert-success').find('.close').after('<strong>Success: Successfully saved!'); \t \t \t \t 
 
\t $('.alert-success').show(); 
 
    }); 
 
\t \t \t \t \t 
 
    $('#failure').click(function(){ 
 
\t $('.message').text(''); 
 
\t $('.message').removeClass('alert-success'); 
 
\t $('.message').addClass('alert-danger'); 
 
\t $('.alert-danger').find('.close').after('<strong>Failed!</strong>'); 
 
\t $('.alert-danger').show(); 
 
    }); 
 
    setTimeout(function() { $(".message").fadeOut('slow'); }, 3000); \t 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="alert message"> 
 
\t <a href="#" class="close" data-dismiss="alert" aria-label="close">X</a> 
 
    </div> 
 
</div> 
 
<button id="success">Success</button> 
 
<button id="failure">Failure</button>

Answer 1

請如下更新功能。

$('#success').click(function(){ 
    //$('.message').text(''); 
    $('.message').removeClass('alert-info'); 
    $('.message').addClass('alert-success'); 
    alert($('.alert-success').find('.close').html()); 
    $('.alert-success').find('.close').after('<strong>Success: Successfully saved!');    
    $('.alert-success').show(); 
    }); 

在這裏，我已經把評論$文字（ ' '）（' 消息'）。，因爲此方法文本（''）也會清除錨標記。

在這裏您還需要刪除舊的類和舊的消息。

Answer 2

下面是完整的代碼

$(document).ready(function(){ 
    $('.alert').hide(); 
    $('#success').click(function(){ 
    $('.message').removeClass('alert-danger'); 
    $('.message').addClass('alert-success'); 
    $('.alert-success').find('.close').next().remove().end().after('<strong>Success: Successfully saved!');    
    $('.alert-success').show(); 
}); 
$('#failure').click(function(){ 
    $('.message').removeClass('alert-success'); 
    $('.message').addClass('alert-danger'); 
    $('.alert-danger').find('.close').next().remove().end().after('<strong>Failed!</strong>'); 
    $('.alert-danger').show(); 
}); 
setTimeout(function() { $(".message").fadeOut('slow'); }, 3000); 
});