查找并清除吐司(Toastr)

Gok*_*l M 1 javascript jquery angularjs toastr angular-toastr

我有一个页面,其中可能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();
});
Run Code Online (Sandbox Code Playgroud)

在上面的代码中,我使用了toastr.clear()清除所有吐司的方法。

谁能帮我识别一下toastOK” 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);
});
Run Code Online (Sandbox Code Playgroud)

更新#2:

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

谢谢。

imj*_*osh 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");
Run Code Online (Sandbox Code Playgroud)

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'));
});
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/esgrwznu/


Chr*_*igg 5

如果想从另一个事件中关闭 toastr(不仅仅是单击)

$('.close-toastr').closest('.toast').remove();
Run Code Online (Sandbox Code Playgroud)