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元素获得了成功和错误消息。

Jquery自定义警报框

1 个答案: