如何在一个函数中将 Alerfity.defaults.theme.ok 更改为不同的样式

Question

为了方便根据不同的场景更改Alertify样式，我写了一个函数来实现。此函数有一个名为 'marker'.

的参数

此函数将根据参数将 alertify.defaults.theme.ok 更改为不同的样式。假设标记是 'danger'，alertify.defaults.theme.ok 将是 'btn-danger'（我使用的是 BS4），如果标记是 'success'，alertify.defaults.theme.ok 将是 'btn-success'，见下面函数：

function formatAlertifyStyle(marker){
    alertify.defaults.transition = 'slide';
    alertify.defaults.theme.ok = 'btn btn-success';
    alertify.defaults.theme.cancel = 'btn btn-light';
    alertify.defaults.theme.input = 'form-control';

    if (marker == 'danger') {
       alertify.defaults.theme.ok = 'btn btn-danger';
       alertify.confirm().set('labels', {ok: 'Confirm'});
    }
    if ( marker == 'warning') {
       alertify.defaults.theme.ok = 'btn btn-warning';
       alertify.confirm().set('labels', {ok: 'Ok'});
    }
    if (marker == 'success') {
       alertify.defaults.theme.ok = 'btn btn-success';
       alertify.alert().set('labels', {ok: 'Ok'});
    }
}

通常情况下，它可以正常工作，但如果您在一个函数中多次调用它，则第二次及之后将无法正常工作。 alertify 使用第一个 alerfity.defaults.theme.ok 无论您将其更改为其他内容多少次。以下是我的使用方法：

function doDelete(){
    // Change Alertify style to 'btn-danger'
     formatAlertifyStyle('danger');
     alertify.confirm(
         'Confirm',
         'Description......',
         function(){
             $.ajax({
                 url:xxx,
                 data:{},
                 success:function(result){
                     if(result==true){
                         // Change Alertify style to 'btn-success'
                         // and it doesn't work!
                         formatAlertifyStyle('success');
                     }
                  }
             });
          },
          function(){
              alertify.error('Canceled');
          } 
   );
}

我不确定是我忘记了什么或做错了什么，请帮忙。任何形式的帮助将不胜感激。

Answer 1

如 docs, these are global defaults used only prior to component initialization. To reapply them, just call destroy() 中所述，因此新的默认设置反映在新实例上。

function formatAlertifyStyle(marker){
    alertify.defaults.transition = 'slide';
    alertify.defaults.theme.ok = 'btn btn-success';
    alertify.defaults.theme.cancel = 'btn btn-light';
    alertify.defaults.theme.input = 'form-control';

    if (marker == 'danger') {
       alertify.confirm().destroy();
       alertify.defaults.theme.ok = 'btn btn-danger';
       alertify.confirm().set('labels', {ok: 'Confirm'});
    }
    if ( marker == 'warning') {
       alertify.confirm().destroy();
       alertify.defaults.theme.ok = 'btn btn-warning';
       alertify.confirm().set('labels', {ok: 'Ok'});
    }
    if (marker == 'success') {
       alertify.alert().destroy();
       alertify.defaults.theme.ok = 'btn btn-success';
       alertify.alert().set('labels', {ok: 'Ok'});
    }
}

如何在一个函数中将 Alerfity.defaults.theme.ok 更改为不同的样式

How to change Alerfity.defaults.theme.ok to different style in one function

javascript

alertify

alertifyjs