Jquery 사용자 지정 경고 상자

Question

확인 이것은 문제입니다. 나는 성공을위한 경고 상자와 오류를위한 경고 상자의 두 가지 유형이 있습니다. 현재 나는 젠드 기반의 애플리케이션을 가지고 있는데, 사용자가 프로필 업데이트, 새로운 제출 등과 같은 양식을 작성할 때마다 이러한 경고 상자가 표시됩니다. 이제 알 필요가있는 것은 어떻게 각 사용자 정의 클래스의 클래스 이름을 만들 수 있습니까? 오류가 발생하면 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> 

오류 :

$("#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 ; 
       } 
}); 

이 문제는 다음과 같습니다

<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를 사용하는 방법입니다 , 각 페이지에 대해 1 개의 일반적인 경고 상자를 추가하여 오류가 발생할 경우 alert-box-error이 표시되고 성공한 경우 alert-box-success에 맞춤 메시지가 표시됩니까? 현재 info-alert을 블록으로 표시하면 현재 오류 메시지 만 표시됩니다.

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

을 분명히 오류에 대한 viceversa에 : 감사

Answer 1

는 내용과 올바른 클래스를 추가 .info-alert을 보여주는하기 전에 다음과 같이 보일 것입니다.

기본적으로 원하지 않는 클래스를 제거한 다음 찾고있는 클래스를 컨테이너에 추가하는 것입니다. 포함 된 <p>을 찾고 이에 따라 메시지 텍스트를 편집하십시오.

Here is a working demo for you

당신은 단지 하나의 일반적인 alert 요소를 사용하여 성공 및 오류 메시지를 을 얻었다.