查找并清除吐司 (Toastr)

Question

我有一个页面，其中可能有多个 toasts 使用插件 https://github.com/CodeSeven/toastr 动态添加。

我有一个 link(Ok) 点击 link 我只需要关闭特定的 toast 而不是所有 toast 可见。

toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function () 
    toastr.clear();
});

在上面的代码中，我使用了 toastr.clear() 方法来清除所有 toasts。

任何人都可以帮助我如何识别确定 link 的 toast 单击并仅清除那个吐司？

更新#1：

我尝试了@imjosh 给出的答案，但是，$(this).closest('.toast') 找到了正确的 toast，但 toastr.clear($(this).closest('.toast')); 没有关闭任何 toast。

如果我将 toast object 存储在一个变量中并作为参数传递给 toastr.clear()，它就可以工作。但是，我不知道如何以这种方式处理多个吐司。

var toast = toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function () 
    toastr.clear(toast);
});

更新#2：

抱歉，我使用的 https://github.com/Foxandxss/angular-toastr 插件不是我上面提到的插件。

谢谢。

Answer 1

toastr.options = {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
    , closeButton: true
    , closeHtml: '<button class="btn" style="background-color: grey; padding: 5px;">OK</button>'
}

toastr.warning("You are warned");
toastr.warning("You are warned 2");

https://jsfiddle.net/3ojp762a/3/

或者，如果您出于某种原因需要这样做，可以按照您尝试的方式进行：

toastr.warning("You are warned. <br/> <a class='close-toastr'> Ok </a>", "", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

toastr.warning("You are warned2. <br/> <a class='close-toastr'> Ok </a>", "", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});


$('.close-toastr').on('click', function () {
    toastr.clear($(this).closest('.toast'));
});

https://jsfiddle.net/esgrwznu/

Answer 2

@imjosh 给出的答案在普通 toastr plugin but not in angular-toastr 插件中效果很好。

所以，我尝试使用 jquery remove() 方法代替 toastr.clear() 方法，效果很好。

$('body').on('click', 'a#close-toastr', function () {
    $(this).closest('.toast').remove();
});

如果这种删除方式 toast 产生任何问题，请发表评论，但我没有发现任何问题。

最后，感谢@imjosh 给我找到最接近的 toast.

的方法

Answer 3

如果想从另一个事件（不仅仅是点击）关闭 toastr

$('.close-toastr').closest('.toast').remove();

Answer 4

我想使用：

toastr.options.onHidden = function() {}

选项是设置 'closeButton: true' 和：

$(this).closest('.toast').find('button.toast-close-button').click();

这样我就可以利用 'onHidden' 回调的所有好处。

不是最有效的方法，但我没有打开很多警报。

$(this) 是通知中的一个按钮。

查找并清除吐司 (Toastr)

Find and clear a toast (Toastr)

javascript

jquery

angularjs

toastr

angular-toastr