Question

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

点击该链接后，我在每个吐司上都有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点击的link并仅清除那个吐司吗？

更新＃1：

我尝试了@imjosh给出的答案，但$(this).closest('.toast')找到了正确的吐司，但toastr.clear($(this).closest('.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插件中表现良好，但在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'回调的所有好处。

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

$（此）是通知中的按钮。

查找并清除吐司（Toastr）

4 个答案: