查找并清除吐司 (Toastr)答案

【问题标题】：Find and clear a toast (Toastr)查找并清除吐司 (Toastr)
【发布时间】：2016-12-08 13:40:47
【问题描述】：

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

我有一个link(Ok) 在每个 toast 上单击该链接我只需要关闭特定的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() 方法来清除所有toast。

谁能帮我识别 Ok link 的 toast 点击并只清除那个 toast 吗？

更新 #1：

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

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

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 插件而不是我上面提到的那个。

谢谢。

【问题讨论】：

如toastr.clear()函数中的提示，clear($toastElement, clearOptions) {}.clear()函数，你可以将元素传递给函数，你可以用toastr.clear($(this));做到这一点
@KevinKloet 我试过toastr.clear($(this));，但它现在没有清除任何吐司，浏览器控制台中也没有错误/警告日志。
对于使用 toastr.js 的任何人 - 我使用的是 2.1.1 版本，而 toastr.clear() 对我不起作用。添加 clearOptions "{ force: true }" 解决了这个问题。谢谢@KevinKloet！

标签： javascript jquery angularjs toastr angular-toastr

【解决方案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/

【讨论】：

$(this).closest('.toast') 找到正确的 toast 但toastr.clear($(this).closest('.toast')); 没有关闭任何 toast。如果我将 toast object 存储在一个变量中并作为参数传递给 toastr.clear() 它可以工作。但是，我不知道如何以这种方式处理多个吐司。请查看更新后的问题。
我正在使用 toastr 插件的角度版本。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

@imjosh 给出的答案在普通的toastr 插件中效果很好，但在angular-toastr 插件中效果不佳。

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

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

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

最后，感谢@imjosh 为我提供了找到最接近的toast 的方法。

【讨论】：

【解决方案4】：

我想用：

toastr.options.onHidden = function() {}

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

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

这样我就可以使用“onHidden”回调的所有好处。

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

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

【讨论】：