1

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

单击该链接时，我在每个吐司上都有一个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()了清除所有 toast 的方法。

任何人都可以帮助我如何识别Ok单击并仅清除那个 toast 吗toast？ link

更新#1：

我尝试了@imjosh 给出的答案，但是$(this).closest('.toast')找到了正确的吐司，但toastr.clear($(this).closest('.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插件。

谢谢。

4

4 回答 4

5 
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/

于 2016-12-08T17:16:37.280 回答
5

如果一个人想从另一个事件中关闭烤面包机（不仅仅是点击）

$('.close-toastr').closest('.toast').remove();
于 2017-09-13T16:50:34.447 回答
4

@imjosh 给出的答案适用于普通的toastr插件，但不适用于angular-toastr插件。

因此，我尝试使用jquery remove()方法而不是toastr.clear()下面的方法，并且效果很好。

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

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

最后，感谢@imjosh 给了我找到最近的方法toast。

于 2016-12-09T07:47:17.797 回答
0

我想使用：

toastr.options.onHidden = function() {}

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

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

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

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

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

于 2020-06-24T11:04:24.917 回答