Jquery自定義警報框

Question

好吧，這是問題。我有兩種類型的警報箱，一種用於成功，另一種用於出錯。目前，我有基於Zend的應用程序，每當用戶填寫一個表單，如配置文件更新，新的提交等，這些警告框將顯示。現在我需要知道的是，我怎樣才能爲每個警報框自定義類的名稱，以便如果發生錯誤，jquery會添加一個類來提醒框並顯示框？以下是我的2警告框

成功：

<div id="alert-container"> 
     <div class="info-alert alert-box-success"> 
      <p class="info-alert-text"> 
       // message will be custom added by jquery 
      </p> 
      <div class="bottom"></div> 
     </div> 
    </div> 

錯誤：

<div id="alert-container"> 
<div class="info-alert alert-box-error"> 
    <p class="info-alert-text"> 
    // message will be custom added by jquery 
    </p> 
<div class="bottom"></div> 
</div> 
</div> 

這是我目前如何使用jQuery來處理用戶提交：

$("#send2friends_submit").on("click", function(){ 


       $('.share-event').attr('disabled',true); 
       $('.share-event').addClass('ybtn-disabled'); 
       var f_mail = $.trim($('textarea#emails').val()); 
       var f_msg = $.trim($('textarea#emails-note').val()); 
       var f_eid = $('#eid').val(); 
       if(f_mail == '' || !validateEmail(f_mail)){ 
       $('.info-alert').show(); 
       $('#send2friends_submit').attr('disabled',false); 
       $('#send2friends_submit').removeClass('ybtn-disabled'); 

       return ; 
       } 
       if(f_msg == ''){ 
       $('.info-alert').show(); 
       $('#send2friends_submit').attr('disabled',false); 
       $('#send2friends_submit').removeClass('ybtn-disabled'); 

       return ; 
       } 
}); 

的問題是，如何爲每個頁面添加1個通用警報框，以便如果遇到錯誤alert-box-error將顯示，如果成功爲alert-box-success將顯示自定義消息？目前只有錯誤信息顯示出來，如果我把info-alert顯示爲塊。由於

Answer 1

之前顯示.info-alert您添加的內容和正確的類，它會是這個樣子：

$('.info-alert') 
.removeClass('alert-box-error') 
.addClass('alert-box-success') 
.find('p') 
.text('This is a success message') 

很顯然反之亦然的錯誤。

基本上你所做的是首先刪除你不需要的類，然後將你正在尋找的類添加到容器中。您查找包含的<p>並相應地編輯其消息文本。

Here is a working demo for you

您只使用一個通用alert元素得到了成功和錯誤消息。